module_to_emotion

Sokilskill · Apr 8, 2024 · 3f2ea28 · 3f2ea28
1 parent cb8dc86
commit 3f2ea28
Show file tree

Hide file tree

Showing 20 changed files with 655 additions and 617 deletions.
diff --git a/src/components/CalBox/CalBox.jsx b/src/components/CalBox/CalBox.jsx
@@ -1,26 +1,29 @@
 import sprite from '../../assets/sprite.svg';
-import css from './CalBox.module.css';
+import {
+  CalBoxDiv,
+  CalEllips,
+  IconRun,
+  CaloriesSum,
+  K,
+  CalText,
+} from './CalBox.styled';
 
 const CalBox = ({ caloriesSum }) => {
   const burnCalSum = Math.round(caloriesSum / 1000);
 
   return (
-    <div className={css.cal_box}>
-      <div className={css.cal_ellips}>
-        <svg className={css.icon_run}>
-          <use
-            className={css.icon_run}
-            href={`${sprite}#icon-running-stick-figure-svgrepo-com-1-1`}
-          />
-        </svg>
-      </div>
-      <span className={css.cal}>
+    <CalBoxDiv>
+      <CalEllips>
+        <IconRun>
+          <use href={`${sprite}#icon-running-stick-figure-svgrepo-com-1-1`} />
+        </IconRun>
+      </CalEllips>
+      <CaloriesSum>
         {!caloriesSum ? 500 : caloriesSum > 1000 ? burnCalSum : caloriesSum}
-      </span>
-      <span className={css.k}>{caloriesSum > 1000 && 'K '}</span>
-      {/* <span className={css.cal}>{!caloriesSum ? `500` : caloriesSum}</span> */}
-      <span className={css.cal_text}>cal</span>
-    </div>
+      </CaloriesSum>
+      <K>{caloriesSum > 1000 && 'K '}</K>
+      <CalText>cal</CalText>
+    </CalBoxDiv>
   );
 };
 export default CalBox;
diff --git a/src/components/CalBox/CalBox.module.css → src/components/CalBox/CalBox.styled.jsx b/src/components/CalBox/CalBox.module.css → src/components/CalBox/CalBox.styled.jsx
@@ -1,15 +1,24 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import '../../index.css';
 
-.cal_box {
+export const CalBoxDiv = styled.div`
   width: fit-content;
   min-width: 119px;
   height: 76px;
   padding: 14px 18px;
   margin-left: auto;
   border-radius: 12px;
   background-color: var(--orange-1, #ef8964);
-}
-.cal_ellips {
+
+  @media (min-width: 768px) {
+    width: fit-content;
+    min-width: 180px;
+    height: 110px;
+    padding: 14px 38px 14px 28px;
+  }
+`;
+
+export const CalEllips = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -18,55 +27,56 @@
   border-radius: 50%;
   background-color: var(--beige, #efa082);
   margin-bottom: 4px;
-}
-.icon_run {
+
+  @media (min-width: 768px) {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 8px;
+  }
+`;
+
+export const IconRun = styled.svg`
   width: 12px;
   height: 12px;
   fill: var(--white, #efede8);
-}
 
-.cal {
+  @media (min-width: 768px) {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+export const CaloriesSum = styled.span`
   color: var(--white, #efede8);
   font-size: 24px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -1px;
   text-transform: uppercase;
   margin-right: 4px;
-}
-.cal_text {
-  color: var(--vievs-text, #efede8a6);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.33;
-  margin-left: 4px;
-}
-@media (min-width: 768px) {
-  .cal_box {
-    width: fit-content;
-    min-width: 180px;
-    height: 110px;
-    padding: 14px 38px 14px 28px;
-  }
-  .cal_ellips {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 8px;
-  }
-  .icon_run {
-    width: 16px;
-    height: 16px;
-  }
-  .cal {
+
+  @media (min-width: 768px) {
     font-size: 48px;
     line-height: 1.04;
     margin-right: 6px;
   }
-  .k {
+`;
+
+export const K = styled.span`
+  @media (min-width: 768px) {
     font-size: 24px;
   }
-  .cal_text {
+`;
+
+export const CalText = styled.span`
+  color: var(--vievs-text, #efede8a6);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.33;
+  margin-left: 4px;
+
+  @media (min-width: 768px) {
     font-size: 16px;
     line-height: 1.5;
   }
-}
+`;
diff --git a/src/components/SignBtns/SignBtns.jsx b/src/components/SignBtns/SignBtns.jsx
@@ -1,25 +1,17 @@
-import css from './SignBtns.module.css';
 import { useNavigate } from 'react-router-dom';
+import { Buttons, SignButton } from './SignBtns.styled';
 
 export const SignBtns = () => {
   const navigate = useNavigate();
 
   return (
-    <div className={css.btns}>
-      <button
-        type="button"
-        className={`${css.sing_btn} ${css.up} `}
-        onClick={() => navigate('signup')}
-      >
+    <Buttons>
+      <SignButton orange type="button" onClick={() => navigate('signup')}>
         Sign Up
-      </button>
-      <button
-        type="button"
-        className={`${css.sing_btn} ${css.in}`}
-        onClick={() => navigate('signin')}
-      >
+      </SignButton>
+      <SignButton type="button" onClick={() => navigate('signin')}>
         Sign In
-      </button>
-    </div>
+      </SignButton>
+    </Buttons>
   );
 };
diff --git a/src/components/SignBtns/SignBtns.module.css b/src/components/SignBtns/SignBtns.module.css
diff --git a/src/components/SignBtns/SignBtns.styled.jsx b/src/components/SignBtns/SignBtns.styled.jsx
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+
+export const Buttons = styled.div`
+  display: flex;
+  gap: 14px;
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+export const SignButton = styled.button`
+  display: flex;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  font-weight: 500;
+  line-height: 1.12;
+  color: var(--white, #efede8);
+  border: 1px solid var(--border, #efede84d);
+  transition:
+    border-color 250ms linear,
+    background-color 250ms linear;
+  background-color: ${(props) =>
+    props.orange ? 'var(--orange, #e6533c);' : 'transparent'};
+  &:hover,
+  &:focus {
+    ${(props) =>
+      props.orange
+        ? 'background-color: var(--orange-1, #ef8964)'
+        : 'border-color: var(--orange, #e6533c)'}
+  }
+
+  @media (min-width: 768px) {
+    padding: 16px 60px;
+    font-size: 20px;
+    line-height: 1.2;
+  }
+`;