Manage Button UI Fixed (PalisadoesFoundation#1388)

* button changes added * Update OrgListCard.tsx * Added styling * Update OrgListCard.tsx * Update OrgListCard.module.css * Update OrgListCard.module.css
palisadoes · Jan 10, 2024 · 59dae2c · 59dae2c
1 parent e6a9c14
commit 59dae2c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
@@ -46,6 +46,22 @@
   z-index: 1;
 }
 
+.flaskIcon {
+  margin-top: 4px;
+}
+
+.manageBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 118px;
+}
+
+.orgName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 @media (max-width: 450px) {
   .orgCard {
     height: unset;
@@ -77,23 +93,12 @@
     margin-left: auto;
     display: block;
   }
-}
-
-.flaskIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 10px 20px 0px 0px;
-}
-
-.manageBtn {
-  display: flex;
-  justify-content: space-around;
-  width: 100px;
-}
-
-.orgName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  .flaskIcon {
+    margin-bottom: 6px;
+  }
+  .manageBtn {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+  }
 }
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
@@ -80,7 +80,8 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
           {data && data?.isSampleOrganization && (
             <FlaskIcon
               fill="var(--bs-white)"
-              width={20}
+              width={12}
+              className={styles.flaskIcon}
               title={t('sampleOrganization')}
             />
           )}