Merge pull request #28 from taraldefi/fix/entityCard

Fix/entity card
taraldefi · Jul 24, 2023 · b9ffe60 · b9ffe60
2 parents 261b20c + 121113a
commit b9ffe60
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/Entity/Entity.scss b/src/Entity/Entity.scss
@@ -2,10 +2,10 @@
   :hover {
     box-shadow: initial;
   }
+  width: 350px;
   display: flex;
   flex-direction: column;
   padding: 20px 0px 20px 16px;
-  width: fit-content;
   height: fit-content;
   border: 1px solid #e2e8f0;
   border-radius: 16px;
@@ -15,21 +15,18 @@
     display: flex;
     padding-bottom: 16px;
     border-bottom: 1px solid #e2e8f0;
-    width: 300px;
 
     .entity--image--container {
-      position: fixed;
       width: 80px;
       height: 80px;
       contain: content;
       border-radius: 16px;
     }
 
     .entity--title--box {
-      left: 85px;
+      width: 50%;
       gap: 5px;
       padding: 16px 45px 16px 18px;
-      margin-left: 80px;
       display: flex;
       flex-direction: column;
 
@@ -41,7 +38,6 @@
         font-size: 24px;
         color: #003c6e;
         font-weight: bold;
-        width: 65%;
       }
 
       :nth-child(2) {
@@ -53,7 +49,8 @@
     }
 
     .options--container {
-      margin-left: auto;
+      position: relative;
+      right: 10px;
     }
     .modal--container {
       position: absolute;

diff --git a/src/Entity/Entity.stories.tsx b/src/Entity/Entity.stories.tsx
@@ -10,16 +10,32 @@ export default {
 const Template: StoryFn<typeof Entity> = (args) => <Entity {...args} />;
 
 export const EntityCard = Template.bind({});
+export const EntityCard2 = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 const data = {
   id: 1,
-  image: 'https://figmage.com/images/7lTCh_OBOJiQQRJDQt-OY.png',
+  image: '/assets/logo.svg',
   title: 'Lange Wiegand GmbH & Co. KG	',
   registrationNo: 1,
   products: 25,
   applications: 25,
 };
 
+const data2 = {
+  id: 2,
+  image: '/assets/logo.svg',
+  title: 'Verno	',
+  registrationNo: 1,
+  products: 25,
+  applications: 25,
+};
+
 EntityCard.args = {
   entityData: data,
+  modal: <div>Modal</div>,
+};
+
+EntityCard2.args = {
+  entityData: data2,
+  modal: <div>Modal</div>,
 };
diff --git a/src/Entity/Entity.tsx b/src/Entity/Entity.tsx
@@ -17,7 +17,7 @@ export function Entity({ entityData, modal }: EntityType) {
           ></img>
         </div>
         <div className="entity--title--box">
-          <span className="">{entityData.title}</span>
+          <span>{entityData.title}</span>
           <span>55-NB</span>
         </div>
         <div className="options--container">{modal}</div>