aligning buttons with title

Signed-off-by: R-Lawton <[email protected]>
Kuadrant · Oct 24, 2024 · 70e325d · 70e325d
1 parent 68dbd9c
commit 70e325d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/src/components/KuadrantOverviewPage.tsx b/src/components/KuadrantOverviewPage.tsx
@@ -348,43 +348,41 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     paginationLimit={5}
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Dropdown
-                      isOpen={isCreateOpen}
-                      onSelect={onMenuSelect}
-                      onOpenChange={setIsCreateOpen}
-                      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                        <MenuToggle
-                          ref={toggleRef}
-                          onClick={onToggleClick}
-                          isExpanded={isCreateOpen}
-                          variant="primary"
-                        >
-                          {t('Create Policy')}
-                        </MenuToggle>
-                      )}
-                    >
-                      <DropdownList>
-                        <DropdownItem value="AuthPolicy" key="auth-policy">
-                          {t('AuthPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="RateLimitPolicy" key="rate-limit-policy">
-                          {t('RateLimitPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="DNSPolicy" key="dns-policy">
-                          {t('DNSPolicy')}
-                        </DropdownItem>
-                        <DropdownItem value="TLSPolicy" key="tls-policy">
-                          {t('TLSPolicy')}
-                        </DropdownItem>
-                      </DropdownList>
-                    </Dropdown>
-                  </div>
+                  <Dropdown
+                    isOpen={isCreateOpen}
+                    onSelect={onMenuSelect}
+                    onOpenChange={setIsCreateOpen}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onToggleClick}
+                        isExpanded={isCreateOpen}
+                        variant="primary"
+                        className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                      >
+                        {t('Create Policy')}
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList class="kuadrant-overview-create-list pf-u-p-0">
+                      <DropdownItem value="AuthPolicy" key="auth-policy">
+                        {t('AuthPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="RateLimitPolicy" key="rate-limit-policy">
+                        {t('RateLimitPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="DNSPolicy" key="dns-policy">
+                        {t('DNSPolicy')}
+                      </DropdownItem>
+                      <DropdownItem value="TLSPolicy" key="tls-policy">
+                        {t('TLSPolicy')}
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
                 </CardBody>
               </Card>
             </FlexItem>
           </Flex>
-
           <Flex className="pf-u-mt-xl">
             <FlexItem flex={{ default: 'flex_1' }}>
               <Card>
@@ -398,11 +396,12 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     emtpyResourceName="Gateways"
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Button onClick={() => handleCreateResource('Gateway')}>
-                      {t(`Create Gateway`)}
-                    </Button>
-                  </div>
+                  <Button
+                    onClick={() => handleCreateResource('Gateway')}
+                    className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                  >
+                    {t(`Create Gateway`)}
+                  </Button>
                 </CardBody>
               </Card>
             </FlexItem>
@@ -418,11 +417,12 @@ const KuadrantOverviewPage: React.FC = () => {
                     namespace="#ALL_NS#"
                     emtpyResourceName="HTTPRoutes"
                   />
-                  <div className="kuadrant-overview-create-button pf-u-mt-md">
-                    <Button onClick={() => handleCreateResource('HTTPRoute')}>
-                      {t(`Create HTTPRoute`)}
-                    </Button>
-                  </div>
+                  <Button
+                    onClick={() => handleCreateResource('HTTPRoute')}
+                    className="kuadrant-overview-create-button pf-u-mt-md pf-u-mr-md"
+                  >
+                    {t(`Create HTTPRoute`)}
+                  </Button>
                 </CardBody>
               </Card>
             </FlexItem>

diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css
@@ -143,6 +143,10 @@
 
 .kuadrant-overview-create-button {
   position: absolute;
-  top: 30px;   
-  right: 30px; 
+  top: 0;   
+  right: 0; 
 }
+
+.kuadrant-overview-create-list, .kuadrant-overview-create-button {
+  font-family: RedHatText, helvetica, arial, sans-serif;
+   }