Improve storybook´s foundations section

Author: Kubit

src/storybook/components/colors/colors.styled.ts

@@ -13,14 +13,16 @@ export const ColorsTitleStyled = styled.h2`
 
 export const ColorsContainerStyled = styled.div`
   margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 `;
 
 export const ColorsColorDataStyled = styled.div`
   display: flex;
   justify-content: space-between;
-  margin-bottom: 50px;
   border-bottom: 1px solid #d7d7d7;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
   padding-left: 20px;
   padding-right: 20px;
   align-items: center;
@@ -36,11 +38,13 @@ export const ColorsCicleStyled = styled.div`
   width: 40px;
   height: 40px;
   border-radius: 100%;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 `;
 
 export const ColorsNameStyled = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 5px;
 `;
 
 export const ColorsHexNameStyled = styled.div`

src/storybook/components/colors/colors.tsx

@@ -20,8 +20,8 @@ export const Colors = (): JSX.Element[] | JSX.Element => {
   if (themeObject === undefined || !themeObject) {
     return (
       <div>
-        <h1>Illustrations</h1>
-        <p>There are no illustrations for the selected theme ({theme})</p>
+        <h1>Colors</h1>
+        <p>There are no colors for the selected theme ({theme})</p>
       </div>
     );
   }
@@ -41,12 +41,12 @@ export const Colors = (): JSX.Element[] | JSX.Element => {
                     }}
                   />
                   <ColorsNameStyled>
-                    <span>color name</span>
+                    <b>color name</b>
                     <span>{_key}</span>
                   </ColorsNameStyled>
                 </ColorsCircleNameStyled>
                 <ColorsHexNameStyled>
-                  <span>Hex</span>
+                  <b>Hex</b>
                   <span>{value as ReactNode}</span>
                 </ColorsHexNameStyled>
               </ColorsColorDataStyled>

src/storybook/components/icons/icons.styled.ts

@@ -2,29 +2,35 @@ import styled from 'styled-components';
 
 export const IconsStyled = styled.div`
   display: flex;
-  gap: 30px;
   flex-wrap: wrap;
-  justify-content: center;
 `;
 
 export const IconsDataStyled = styled.div`
-  display: inline-flex;
+  width: 20%;
+  display: flex;
   flex-direction: column;
-  gap: 10px;
+  -webkit-box-align: center;
   align-items: center;
-  flex-wrap: wrap;
-  width: calc(100% / 4);
+  -webkit-box-pack: center;
+  justify-content: center;
+  padding: 2.5rem 1rem 1rem;
+  gap: 3rem;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(209, 209, 209);
+  word-break: break-all;
 `;
 
 export const IconsInputStyled = styled.input`
-  border: 1px solid rgba(153, 153, 153, 0.4);
-  height: 50px;
   width: 100%;
-  border-radius: 28px;
-  padding: 0 28px;
-  margin-bottom: 50px;
+  border: 1px solid rgb(0, 0, 0);
+  padding: 0.5rem;
+  position: sticky;
+  top: 10px;
+  background-color: rgb(255, 255, 255);
+  z-index: 1;
+  margin-bottom: 2rem;
 `;
 
 export const IconNameStyled = styled.span`
-  font-size: 14px;
+  font-size: 12px;
 `;