wca-designsystem 1.0.14 → 1.0.16

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.14",
+  "version": "1.0.16",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/CardInicial/index.tsx

@@ -33,48 +33,59 @@ const CardInicial = ({
   aviso = false,
 }: CardInicialProps) => {
   return (
-    <S.CardInicialWrapper>
+    <S.CardInicialWrapper >
       <S.CardInicialHeader
         data-testid="card-header"
         style={{
           background: acessoPermitido ? color : theme.colors.gray['500'],
         }}
       >
-        <Icone width={72} height={72} svg={icone} fill={theme.colors.white} />
+
+        <Icone width={45} height={45} svg={icone} fill={theme.colors.white} />
+
       </S.CardInicialHeader>
 
       <S.CardInicialBody>
+
         <h2
           style={{ color: acessoPermitido ? color : theme.colors.gray['300'] }}
         >
           {titulo}
         </h2>
-        <p>{descricao}</p>
-      </S.CardInicialBody>
-      <S.CardInicialFooter>
-        <Botao
-          tipo="default"
-          onClick={() => onEntrar()}
-          disabled={!acessoPermitido}
-          color={color}
-          children={children}
-        />
-      </S.CardInicialFooter>
 
-      {aviso && (
-        <S.CardInicialWarning>
-          <Icone
-            width={20}
-            height={20}
-            svg={avisoInfo?.icone ?? ''}
-            fill={avisoInfo?.corIcone}
+        <p>
+          {descricao}
+        </p>
+
+        <S.CardInicialFooter>
+          <Botao
+            tipo="default"
+            onClick={() => onEntrar()}
+            disabled={!acessoPermitido}
+            color={color}
+            children={children}
           />
-          <S.CardInicialWarningText>
-            {avisoInfo?.mensagem}
-          </S.CardInicialWarningText>
-        </S.CardInicialWarning>
-      )}
-    </S.CardInicialWrapper>
+        </S.CardInicialFooter>
+      </S.CardInicialBody>
+
+      <S.CardInicialWarning>
+        {
+          aviso && (
+            <>
+              <Icone
+                width={20}
+                height={20}
+                svg={avisoInfo?.icone ?? ''}
+                fill={avisoInfo?.corIcone}
+              />
+              <S.CardInicialWarningText>
+                {avisoInfo?.mensagem}
+              </S.CardInicialWarningText>
+            </>
+          )
+        }
+      </S.CardInicialWarning>
+    </S.CardInicialWrapper >
   );
 };
 export default CardInicial;

package/src/components/molecules/CardInicial/styles.ts

@@ -2,8 +2,10 @@ import styled, { css } from 'styled-components';
 
 export const CardInicialWrapper = styled.div`
   ${({ theme }) => css`
-    width: 320px;
-    height: min-content;
+    position: relative;
+    width: auto;
+    max-width: 250px;
+    height: 230px;
     border-radius: 8px;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     background-color: ${theme.colors.white};
@@ -12,30 +14,38 @@ export const CardInicialWrapper = styled.div`
 
 export const CardInicialHeader = styled.div`
   ${() => css`
-    width: 320px;
-    height: 136px;
+    width: auto;
+    max-width: 320px;
+    padding: 10px 0;
     border-radius: 8px 8px 0 0;
     display: flex;
     align-items: center;
     justify-content: center;
   `}
+
 `;
 
 export const CardInicialBody = styled.div`
   ${({ theme }) => css`
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     text-align: center;
     background-color: ${theme.colors.white};
-    padding: 25px 16px;
-
+    padding: 0 12px;
+  
     h2 {
       font-size: ${theme.sizes.large};
       font-weight: 700;
+      margin: 0;
     }
 
     p {
       font-size: ${theme.sizes.small};
       font-weight: 300;
       color: ${theme.colors.blackSti};
+      margin: 0;
     }
   `}
 `;
@@ -44,7 +54,6 @@ export const CardInicialFooter = styled.div`
   ${({ theme }) => css`
     text-align: center;
     border-radius: 0 8px 8px;
-    padding-bottom: 24px;
     background-color: ${theme.colors.white};
 
     button {
@@ -55,11 +64,17 @@ export const CardInicialFooter = styled.div`
 
 export const CardInicialWarning = styled.div`
   ${() => css`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding-bottom: 20px;
+    padding: 0px;
+    margin-top: auto;
+    padding: 4px 0;
   `}
 `;
 
@@ -68,4 +83,4 @@ export const CardInicialWarningText = styled.span`
     font-size: ${theme.sizes.xSmall};
     color: ${theme.colors.gray[700]};
   `}
-`;
+`;