Changed the Celsius and Fahreneit indicator from div elements to butt…

…on elements
hmdNetizen · Jun 26, 2021 · d58cf19 · d58cf19
1 parent 79d5453
commit d58cf19
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git a/src/components/layouts/ContentSection.tsx b/src/components/layouts/ContentSection.tsx
@@ -6,16 +6,12 @@ const ContentSection: React.FC = () => {
   return (
     <section className="section">
       <div className="section__temperature">
-        <div className="section__temperature__wrapper section__temperature__wrapper--celsius">
-          <p>
-            <sup>o</sup>C
-          </p>
-        </div>
-        <div className="section__temperature__wrapper section__temperature__wrapper--fahrenheit">
-          <p>
-            <sup>o</sup>F
-          </p>
-        </div>
+        <button className="section__temperature__button section__temperature__button--celsius">
+          <sup>o</sup>C
+        </button>
+        <button className="section__temperature__button section__temperature__button--fahrenheit">
+          <sup>o</sup>F
+        </button>
       </div>
       <div className="card">
         {[...new Array(5)].map((data: any) => (

diff --git a/src/components/layouts/MainContents.tsx b/src/components/layouts/MainContents.tsx
@@ -7,7 +7,7 @@ const MainContents: React.FC = () => {
   const [openSearch, setOpenSearch] = useState(false);
   return (
     <main className="main">
-      <aside className={`aside`}>
+      <aside className="aside">
         {!openSearch ? (
           <AsideContent setOpenSearch={setOpenSearch} openSearch={openSearch} />
         ) : (

diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
@@ -13,4 +13,5 @@ $color-light-blue: #3c47e9;
 $color-light-blue-1: #3a44d8;
 $color-light-blue-2: #343ec5;
 $color-dark-blue: #110e3c;
+$color-dark-blue-1: #0f0b53;
 $color-yellow: #ffec65;
diff --git a/src/sass/index.css b/src/sass/index.css
diff --git a/src/sass/index.css.map b/src/sass/index.css.map
diff --git a/src/sass/layout/_section.scss b/src/sass/layout/_section.scss
@@ -5,26 +5,30 @@
     display: flex;
     justify-content: flex-end;
 
-    &__wrapper {
+    &__button {
       @include roundedCircle;
+      display: block;
+      height: 3em;
+      width: 3em;
+      border: 0;
+      cursor: pointer;
 
       &--celsius {
         background: $color-white;
         color: $color-dark-blue;
         margin-right: 1em;
 
-        & p {
-          font-size: 1.5rem;
-          font-weight: 600;
+        &:active {
+          background: $color-grey-light-1;
         }
       }
 
       &--fahrenheit {
         background: $color-tertiary;
+        color: $color-white;
 
-        & p {
-          font-size: 1.5rem;
-          font-weight: 600;
+        &:active {
+          background: $color-dark-blue-1;
         }
       }
     }