Merge pull request #958 from basedosdados/development

feat: ajust visual
basedosdados · Sep 20, 2024 · ddcc67c · ddcc67c
2 parents 250a287 + 1af8f94
commit ddcc67c
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 50 deletions.
diff --git a/next/components/molecules/ColumnsTable.js b/next/components/molecules/ColumnsTable.js
@@ -281,7 +281,7 @@ export default function ColumnsTable({
           display="flex"
           flexDirection="row"
           alignItems="center"
-          gap="4px"
+          gap="8px"
           color="#0068C5"
           fill="#0068C5"
           _hover={{
@@ -290,7 +290,7 @@ export default function ColumnsTable({
           }}
         >
           Baixar tabela que faz a tradução desta coluna
-          <DownloadIcon width="18px" height="18px"/>
+          <DownloadIcon width="14px" height="16px"/>
         </Text>
         <Text>Dicionário</Text>
       </Box>
@@ -342,7 +342,7 @@ export default function ColumnsTable({
               }}
               flexDirection="row"
               alignItems="center"
-              gap="4px"
+              gap="8px"
               color="#0068C5"
               fill="#0068C5"
               _hover={{
@@ -359,7 +359,7 @@ export default function ColumnsTable({
                 :
                 <>
                   Baixar tabela que faz a tradução desta coluna
-                  <DownloadIcon width="18px" height="18px"/>
+                  <DownloadIcon width="14px" height="16px"/>
                 </>
               }
             </Text>
@@ -585,7 +585,7 @@ export default function ColumnsTable({
                 <TableHeader
                   header={headers[0]}
                   zIndex={5}
-                  left={{base: "none", lg:"72px"}}
+                  left={{base: "none", lg: template === "download" ? "0" : "72px"}}
                 />
 
                 {headers.map((elm, i) => (
@@ -635,7 +635,7 @@ export default function ColumnsTable({
 
                   <TableValue
                     position="sticky"
-                    left={{base: "none", lg:"72px"}}
+                    left={{base: "none", lg: template === "download" ? "0" : "72px"}}
                     zIndex="4"
                     backgroundColor="#FFF"
                   >

diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js
@@ -12,7 +12,8 @@ import {
   Skeleton,
   Stack,
   useDisclosure,
-  ModalCloseButton
+  ModalCloseButton,
+  Spinner
 } from "@chakra-ui/react";
 import { useState, useEffect, useRef } from "react";
 import hljs from "highlight.js/lib/core";
@@ -35,7 +36,7 @@ import {
 } from "../../pages/api/tables"
 
 
-import { CopyIcon } from "../../public/img/icons/copyIcon";
+import { CopySolidIcon } from "../../public/img/icons/copyIcon";
 import DownloadIcon from "../../public/img/icons/downloadIcon";
 import InfoIcon from "../../public/img/icons/infoIcon";
 import ChevronIcon from "../../public/img/icons/chevronIcon";
@@ -106,7 +107,6 @@ export function CodeHighlight({ language, children }) {
           fontWeight="500"
           fontSize="12px"
           lineHeight="18px"
-          letterSpacing="0.1px"
           color="#878A8E"
           fill="#878A8E"
           _hover={{
@@ -123,7 +123,7 @@ export function CodeHighlight({ language, children }) {
               marginLeft="5px"
             />
           :
-            <CopyIcon
+            <CopySolidIcon
               alt="copiar conteúdo"
               width="24px"
               height="24px"
@@ -162,7 +162,6 @@ export function CodeHighlight({ language, children }) {
             fontWeight="500"
             fontSize="12px"
             lineHeight="18px"
-            letterSpacing="0.1px"
           >
             {isExpanded ? "Recolher" : "Expandir"}
           </Text>
@@ -185,6 +184,7 @@ export default function DataInformationQuery({ resource }) {
   const [includeTranslation, setIncludeTranslation] = useState(true)
   const [hasLoadingColumns, setHasLoadingColumns] = useState(true)
   const [isLoadingCode, setIsLoadingCode] = useState(false)
+  const [isLoadingSpin, setIsLoadingSpin] = useState(false)
   const [hasLoadingResponse, setHasLoadingResponse] = useState(false)
   const plansModal = useDisclosure()
 
@@ -237,6 +237,7 @@ export default function DataInformationQuery({ resource }) {
 
   useEffect(() => {
     if(hasLoadingResponse === true) {
+      setIsLoadingSpin(true)
       SqlCodeString()
     }
   }, [hasLoadingResponse])
@@ -272,6 +273,7 @@ export default function DataInformationQuery({ resource }) {
     if(result === null) return 
     setSqlCode(result.trim())
     setIsLoadingCode(false)
+    setIsLoadingSpin(false)
   }
 
   const handleAccessIndexes = (index) => {
@@ -364,7 +366,7 @@ export default function DataInformationQuery({ resource }) {
               startColor="#F0F0F0"
               endColor="#F3F3F3"
               borderRadius="6px"
-              height="20px"
+              lineHeight="20px"
               width="fit-content"
               isLoaded={!hasLoadingColumns}
             >
@@ -538,7 +540,7 @@ export default function DataInformationQuery({ resource }) {
                   backgroundColor:"#22703E"
                 }}
               >
-                Gerar consulta
+                Gerar consulta <Spinner display={ isLoadingSpin ? "flex" : "none"} width="16px" height="16px"/>
               </Box>
             </Skeleton>
           </Box>
@@ -630,8 +632,8 @@ export default function DataInformationQuery({ resource }) {
                 }}
               >
                 <DownloadIcon
-                  width="24px"
-                  height="24px"
+                  width="16px"
+                  height="16px"
                 />
                   Download da tabela {downloadWarning !== "biggest1gb" && `(${formatBytes(resource.uncompressedFileSize)})`}
               </Box>

diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js
@@ -645,7 +645,7 @@ function DesktopLinks({ userData, links, position = false, path, userTemplate =
       > 
         {icon && icon}
         {text}
-        <RedirectIcon fill={flag && url.slice(0,4) === "http" ? "#A3A3A3" : "transparent"} marginLeft="auto" width="16px" height="16px"/>
+        <RedirectIcon fill={flag && url.slice(0,4) === "http" ? "#A3A3A3" : "transparent"} marginLeft="auto" width="12px" height="12px"/>
       </Link>
     )
   }

diff --git a/next/components/organisms/BdmTablePage.js b/next/components/organisms/BdmTablePage.js
@@ -235,8 +235,9 @@ export default function BdmTablePage({ id }) {
     >
       <StackSkeleton
         display="flex"
-        flexDirection="row"
-        alignItems="center"
+        height="100%"
+        flexDirection={{base: "column", lg: "row"}}
+        alignItems={{base: "start", lg: "center"}}
         gap="8px"
       >
         <Text
@@ -348,21 +349,28 @@ export default function BdmTablePage({ id }) {
         >
           <Box
             display="flex"
-            flexDirection="row"
-            gap="8px"
+            marginBottom={{base: "24px", lg: "0"}}
+            flexDirection={{base: "column", lg: "row"}}
+            gap="4px"
             fontFamily="Roboto"
             fontWeight="400"
             fontSize="14px"
             lineHeight="22px"
             color="#464A51"
           >
             {resource?.updates?.[0]?.latest ?
-              formatDate(resource.updates[0].latest)
+              `${formatDate(resource.updates[0].latest)}:`
               :
-              "Não informado"
-            }: Última vez que atualizamos na BD
+              "Não informado:"
+            }
+
+            <Text>
+              Última vez que atualizamos na BD
+            </Text>
+
             {resource?.updates?.[0]?.frequency &&
               <Text
+                width="fit-content"
                 backgroundColor="#EEEEEE"
                 padding="2px 4px"
                 borderRadius="4px"
@@ -381,6 +389,7 @@ export default function BdmTablePage({ id }) {
             }
             {!resource?.updates?.[0]?.frequency &&
               <Text
+                width="fit-content"
                 backgroundColor="#EEEEEE"
                 padding="2px 4px"
                 borderRadius="4px"
@@ -396,8 +405,9 @@ export default function BdmTablePage({ id }) {
           </Box>
           <Box
             display="flex"
-            flexDirection="row"
-            gap="8px"
+            flexDirection={{base: "column", lg: "row"}}
+            marginBottom={{base: "24px", lg: "0"}}
+            gap="4px"
             fontFamily="Roboto"
             fontWeight="400"
             fontSize="14px"
@@ -406,12 +416,18 @@ export default function BdmTablePage({ id }) {
             color="#464A51"
           >
             {resource?.rawDataSource?.[0]?.updates?.[0]?.latest ?
-              formatDate(resource.rawDataSource[0].updates[0].latest)
+              `${formatDate(resource.rawDataSource[0].updates[0].latest)}:`
               :
-              "Não informado"
-            }: Última vez que atualizaram na fonte original
+              "Não informado:"
+            }
+
+            <Text>
+              Última vez que atualizaram na fonte original
+            </Text>
+
             {resource?.rawDataSource?.[0]?.updates?.[0]?.frequency ?
               <Text
+                width="fit-content"
                 backgroundColor="#EEEEEE"
                 padding="2px 4px"
                 borderRadius="4px"
@@ -430,6 +446,7 @@ export default function BdmTablePage({ id }) {
             :
             !resource?.rawDataSource?.[0]?.updates?.[0] || !resource?.updates?.[0]?.frequency ?
               <Text
+                width="fit-content"
                 backgroundColor="#EEEEEE"
                 padding="2px 4px"
                 borderRadius="4px"
@@ -447,8 +464,8 @@ export default function BdmTablePage({ id }) {
           </Box>
           <Text
             display="flex"
-            flexDirection="row"
-            gap="8px"
+            flexDirection={{base: "column", lg: "row"}}
+            gap="4px"
             fontFamily="Roboto"
             fontWeight="400"
             fontSize="14px"
@@ -457,10 +474,13 @@ export default function BdmTablePage({ id }) {
             color="#464A51"
           >
             {resource?.rawDataSource?.[0]?.polls?.[0]?.latest ?
-              formatDate(resource.rawDataSource[0].polls[0].latest)
+              `${formatDate(resource.rawDataSource[0].polls[0].latest)}:`
               :
-              "Não informado"
-            }: Última vez que verificamos a fonte original
+              "Não informado:"
+            }
+            <Text as="span">
+              Última vez que verificamos a fonte original
+            </Text>
           </Text>
         </SkeletonText>
       </Stack>
@@ -512,8 +532,8 @@ export default function BdmTablePage({ id }) {
             }
             <RedirectIcon
               display={resource?.cloudTables ? "flex" : "none"}
-              width="16px"
-              height="16px"
+              width="12px"
+              height="12px"
             />
           </Text>
         </StackSkeleton>
@@ -616,8 +636,8 @@ export default function BdmTablePage({ id }) {
               >
                 Download dos arquivos
                 <DownloadIcon
-                  width="24px"
-                  height="24px"
+                  width="16px"
+                  height="16px"
                 />
               </Text>
             :

diff --git a/next/components/organisms/InformationRequestPage.js b/next/components/organisms/InformationRequestPage.js
@@ -169,8 +169,8 @@ export default function InformationRequestPage({ id }) {
         >
           Acessar dados
           <RedirectIcon
-            width="16px"
-            height="16px"
+            width="12px"
+            height="12px"
           />
         </Box>
 
@@ -199,8 +199,8 @@ export default function InformationRequestPage({ id }) {
         >
           Acessar pedido
           <RedirectIcon
-            width="16px"
-            height="16px"
+            width="12px"
+            height="12px"
           />
         </Box>
       </StackSkeleton>

diff --git a/next/components/organisms/RawDataSourcesPage.js b/next/components/organisms/RawDataSourcesPage.js
@@ -250,8 +250,8 @@ export default function RawDataSourcesPage({ id }) {
         >
           Acessar fonte original
           <RedirectIcon
-            width="16px"
-            height="16px"
+            width="12px"
+            height="12px"
           />
         </Box>
       </StackSkeleton>

diff --git a/next/pages/quem-somos.js b/next/pages/quem-somos.js
@@ -522,7 +522,7 @@ export default function QuemSomos({ data }) {
                   href="https://cloud.google.com/blog/topics/customers/announcing-winners-of-google-cloud-customer-awards"
                 >
                   Veja mais detalhes
-                  <RedirectIcon alt="hiperlink" fill="#42B0FF"/>
+                  <RedirectIcon width="12px" height="12px" alt="hiperlink" fill="#42B0FF"/>
                 </Link>
               </Box>
 
@@ -564,7 +564,7 @@ export default function QuemSomos({ data }) {
                   href="https://www.tesourotransparente.gov.br/descubra-explore-crie/crie"
                 >
                   Veja mais detalhes
-                  <RedirectIcon alt="hiperlink" fill="#42B0FF"/>
+                  <RedirectIcon width="12px" height="12px" alt="hiperlink" fill="#42B0FF"/>
                 </Link>
               </Box>
             </Stack>
@@ -800,9 +800,10 @@ export default function QuemSomos({ data }) {
             <RoundedButton
               paddingX="20px"
               fontSize="15px"
+              alignItems="center"
               onClick={() => window.open("https://info.basedosdados.org/carreiras", "_blank")}
             >
-              Veja as vagas abertas <RedirectIcon alt="vagas basedosdados" fill="#FFF" width="15px" height="15px" marginLeft="8px"/>
+              Veja as vagas abertas <RedirectIcon alt="vagas basedosdados" fill="#FFF" width="12px" height="12px" marginLeft="8px"/>
             </RoundedButton>
           </Box>
         </Stack>

diff --git a/next/public/img/icons/downloadIcon.js b/next/public/img/icons/downloadIcon.js
@@ -2,11 +2,11 @@ import { createIcon } from '@chakra-ui/icons';
 
 const DownloadIcon = createIcon({
   displayName: "download",
-  viewBox: "0 0 22 22",
+  viewBox: "0 0 28 30",
   path: (
     <path
       fill="current-color"
-      d="M11.7749 12.4646L14.1904 10.0491C14.4713 9.76821 14.9267 9.76821 15.2075 10.0491C15.4884 10.33 15.4884 10.7854 15.2075 11.0662L11.5628 14.711C11.2819 14.9919 10.8265 14.9919 10.5456 14.711C10.5381 14.7035 10.5309 14.6959 10.5238 14.6882L10.509 14.6738L6.86421 11.029C6.58334 10.7481 6.58334 10.2928 6.86421 10.0119C7.14509 9.73101 7.60048 9.73101 7.88136 10.0119L10.3364 12.467V2.71923C10.3364 2.32201 10.6585 2 11.0557 2C11.4529 2 11.7749 2.32201 11.7749 2.71923V12.4646ZM5.93396 16.2859C5.93396 15.8899 5.61296 15.5689 5.21698 15.5689C4.821 15.5689 4.5 15.8899 4.5 16.2859V17.1978C4.5 18.7452 5.75441 19.9996 7.3018 19.9996H14.7597C16.3071 19.9996 17.5615 18.7452 17.5615 17.1978V16.2859C17.5615 15.8899 17.2405 15.5689 16.8445 15.5689C16.4485 15.5689 16.1275 15.8899 16.1275 16.2859V17.1978C16.1275 17.9533 15.5151 18.5657 14.7597 18.5657H7.3018C6.54636 18.5657 5.93396 17.9533 5.93396 17.1978V16.2859Z"
+      d="M14 22.2563C13.7667 22.2563 13.5479 22.2198 13.3438 22.1469C13.1396 22.074 12.95 21.95 12.775 21.775L6.475 15.475C6.125 15.125 5.95729 14.7167 5.97187 14.25C5.98646 13.7833 6.15417 13.375 6.475 13.025C6.825 12.675 7.24062 12.4927 7.72187 12.4781C8.20312 12.4635 8.61875 12.6312 8.96875 12.9812L12.25 16.2625V1.75C12.25 1.25417 12.4177 0.838542 12.7531 0.503125C13.0885 0.167708 13.5042 0 14 0C14.4958 0 14.9115 0.167708 15.2469 0.503125C15.5823 0.838542 15.75 1.25417 15.75 1.75V16.2625L19.0312 12.9812C19.3813 12.6312 19.7969 12.4635 20.2781 12.4781C20.7594 12.4927 21.175 12.675 21.525 13.025C21.8458 13.375 22.0135 13.7833 22.0281 14.25C22.0427 14.7167 21.875 15.125 21.525 15.475L15.225 21.775C15.05 21.95 14.8604 22.074 14.6562 22.1469C14.4521 22.2198 14.2333 22.2563 14 22.2563ZM3.5 30C2.5375 30 1.71354 29.6573 1.02812 28.9719C0.342708 28.2865 0 27.4625 0 26.5V23C0 22.5042 0.167708 22.0885 0.503125 21.7531C0.838542 21.4177 1.25417 21.25 1.75 21.25C2.24583 21.25 2.66146 21.4177 2.99688 21.7531C3.33229 22.0885 3.5 22.5042 3.5 23V26.5H24.5V23C24.5 22.5042 24.6677 22.0885 25.0031 21.7531C25.3385 21.4177 25.7542 21.25 26.25 21.25C26.7458 21.25 27.1615 21.4177 27.4969 21.7531C27.8323 22.0885 28 22.5042 28 23V26.5C28 27.4625 27.6573 28.2865 26.9719 28.9719C26.2865 29.6573 25.4625 30 24.5 30H3.5Z"
     />
   )
 })

diff --git a/next/public/img/icons/redirectIcon.js b/next/public/img/icons/redirectIcon.js
@@ -2,11 +2,11 @@ import { createIcon } from '@chakra-ui/icons';
 
 const RedirectIcon = createIcon({
   displayName: "redirect",
-  viewBox: "0 0 16 16",
+  viewBox:"0 0 28 28",
   path: (
     <path
       fill="current-color"
-      d="M8.28658 7.5911C8.57343 7.88991 9.04821 7.89961 9.34702 7.61276L13.6142 3.51646L13.6128 4.62615C13.6123 5.04036 13.9476 5.37658 14.3618 5.37711C14.776 5.37764 15.1123 5.04228 15.1128 4.62807L15.1164 1.77726C15.1167 1.54501 15.0114 1.33728 14.8459 1.1995C14.7075 1.05746 14.5135 0.970193 14.2996 0.97271L11.444 1.00631C11.0298 1.01118 10.698 1.35089 10.7029 1.76508C10.7077 2.17926 11.0474 2.51108 11.4616 2.5062L12.5135 2.49383L8.30825 6.53066C8.00943 6.81751 7.99973 7.29228 8.28658 7.5911ZM2.43359 3.57275C2.43359 3.43924 2.54182 3.33101 2.67533 3.33101H8.24917C8.66338 3.33101 8.99917 2.99523 8.99917 2.58101C8.99917 2.1668 8.66338 1.83101 8.24917 1.83101H2.67533C1.71339 1.83101 0.933594 2.61082 0.933594 3.57275V13.2256C0.933594 14.1876 1.7134 14.9674 2.67533 14.9674H12.5927C13.5546 14.9674 14.3344 14.1876 14.3344 13.2256V7.63488C14.3344 7.22067 13.9986 6.88488 13.5844 6.88488C13.1702 6.88488 12.8344 7.22067 12.8344 7.63488V13.2256C12.8344 13.3591 12.7262 13.4674 12.5927 13.4674H2.67533C2.54182 13.4674 2.43359 13.3591 2.43359 13.2256V3.57275Z"
+      d="M3.46073 28C2.50288 28 1.68663 27.6627 1.01198 26.988C0.337326 26.3134 0 25.4971 0 24.5393V3.46073C0 2.50288 0.337326 1.68663 1.01198 1.01198C1.68663 0.337326 2.50288 0 3.46073 0H12.2696C12.7551 0 13.165 0.166951 13.4991 0.500855C13.833 0.835012 14 1.24485 14 1.73037C14 2.21588 13.833 2.62572 13.4991 2.95988C13.165 3.29378 12.7551 3.46073 12.2696 3.46073H3.46073V24.5393H24.5393V15.7304C24.5393 15.2449 24.7062 14.835 25.0401 14.5009C25.3743 14.167 25.7841 14 26.2696 14C26.7551 14 27.165 14.167 27.4991 14.5009C27.833 14.835 28 15.2449 28 15.7304V24.5393C28 25.4971 27.6627 26.3134 26.988 26.988C26.3134 27.6627 25.4971 28 24.5393 28H3.46073ZM24.5393 5.87222L16.9844 13.4271C16.6632 13.7486 16.2627 13.9078 15.783 13.9047C15.3036 13.9017 14.9033 13.7394 14.582 13.418C14.2606 13.0967 14.0998 12.6949 14.0998 12.2124C14.0998 11.7297 14.2606 11.3277 14.582 11.0065L22.1278 3.46073H18.7728C18.2873 3.46073 17.8774 3.29378 17.5433 2.95988C17.2094 2.62572 17.0424 2.21588 17.0424 1.73037C17.0424 1.24485 17.2094 0.835012 17.5433 0.500855C17.8774 0.166951 18.2873 0 18.7728 0H26.2696C26.7551 0 27.165 0.166951 27.4991 0.500855C27.833 0.835012 28 1.24485 28 1.73037V9.22723C28 9.71275 27.833 10.1226 27.4991 10.4567C27.165 10.7906 26.7551 10.9576 26.2696 10.9576C25.7841 10.9576 25.3743 10.7906 25.0401 10.4567C24.7062 10.1226 24.5393 9.71275 24.5393 9.22723V5.87222Z"
     />
   )
 })