Applied styles and functionality for the humidity progress bar

hmdNetizen · Jul 1, 2021 · 1b5a3a7 · 1b5a3a7
1 parent d33157c
commit 1b5a3a7
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 4 deletions.
diff --git a/src/components/RectangularCard.tsx b/src/components/RectangularCard.tsx
@@ -39,7 +39,14 @@ const RectangularCard: React.FC = () => {
                 <p className="rectangular__card__progressBar__point">50</p>
                 <p className="rectangular__card__progressBar__point">100</p>
               </div>
-              <div className="rectangular__card__progressBar__line" />
+              <div className="rectangular__card__progressBar__line">
+                <div
+                  className="rectangular__card__progressBar__done"
+                  style={{
+                    width: weatherData.consolidated_weather[0].humidity + "%",
+                  }}
+                />
+              </div>
               <p className="rectangular__card__progressBar__percent">%</p>
             </div>
           </div>

diff --git a/src/components/SquareCard.tsx b/src/components/SquareCard.tsx
@@ -1,5 +1,5 @@
 import moment from "moment";
-import showWeatherImage from "./showWeatherImage";
+import showWeatherImage from "../helpers/showWeatherImage";
 
 interface Props {
   day: {

diff --git a/src/components/layouts/Aside.tsx b/src/components/layouts/Aside.tsx
@@ -3,7 +3,7 @@ import Moment from "react-moment";
 import cloudBackground from "../../assets/Cloud-background.png";
 import { MdMyLocation, MdLocationOn } from "react-icons/md";
 import { useTypedSelector } from "../hooks/useTypedSelector";
-import showWeatherImage from "./../showWeatherImage";
+import showWeatherImage from "../../helpers/showWeatherImage";
 
 interface Props {
   setOpenSearch: (openSearch: boolean) => void;

diff --git a/src/components/showWeatherImage.ts → src/helpers/showWeatherImage.ts b/src/components/showWeatherImage.ts → src/helpers/showWeatherImage.ts
diff --git a/src/sass/components/_rectangularCard.scss b/src/sass/components/_rectangularCard.scss
@@ -70,7 +70,20 @@
       height: 0.5em;
       border-radius: 10em;
       margin-bottom: 0.2em;
+      background: $color-white;
+      position: relative;
+    }
+
+    &__done {
+      position: absolute;
+      border-radius: 10em;
+      top: 0;
+      left: 0;
+      height: 100%;
       background: $color-yellow;
+      // animation-name: progress;
+      // animation-duration: 3s;
+      // animation-fill-mode: forwards;
     }
 
     &__percent {
@@ -80,3 +93,13 @@
     }
   }
 }
+
+// @keyframes progress {
+//   0% {
+//     width: 0;
+//   }
+
+//   100% {
+//     width: 90%;
+//   }
+// }
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