diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 00000000..111ec440 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x, 18.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test \ No newline at end of file diff --git a/README.md b/README.md index 65e26617..749d9609 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # sytizen-unity +[![.github/workflows/moralis.yml](https://github.com/Signal-K/sytizen/actions/workflows/moralis.yml/badge.svg?branch=ansible)](https://github.com/Signal-K/sytizen/actions/workflows/moralis.yml) Citizen Science (Sci-tizen) visualisation in the Unity.com engine diff --git a/src/components/Body Section/Activity Section/Activity.jsx b/src/components/Body Section/Activity Section/Activity.jsx index c06ee9d8..5cf96dca 100644 --- a/src/components/Body Section/Activity Section/Activity.jsx +++ b/src/components/Body Section/Activity Section/Activity.jsx @@ -1,9 +1,74 @@ import React from "react"; import './activity.css'; +// Imported icons ====> +import { BsArrowRightShort } from 'react-icons/bs'; + +// Imported assets +import tesspic from '../../../Assets/StatElements/TessStat.png'; + const Activity = () => { return ( -
Activity
+
+
+

Recent Activity

+ +
+
+
+ Customer image +
+ Liam Arbuckle {/* Static data - import from realtime supa later */} + Ordered a new spaceship {/* Ditto */} +
+
+ 2 min ago +
+
+
+ Customer image +
+ Liam Arbuckle {/* Static data - import from realtime supa later */} + Ordered a new spaceship {/* Ditto */} +
+
+ 2 min ago +
+
+
+ Customer image +
+ Liam Arbuckle {/* Static data - import from realtime supa later */} + Ordered a new spaceship {/* Ditto */} +
+
+ 2 min ago +
+
+
+ Customer image +
+ Liam Arbuckle {/* Static data - import from realtime supa later */} + Ordered a new spaceship {/* Ditto */} +
+
+ 2 min ago +
+
+
+ Customer image +
+ Liam Arbuckle {/* Static data - import from realtime supa later */} + Ordered a new spaceship {/* Ditto */} +
+
+ 2 min ago +
+
+
+
) } diff --git a/src/components/Body Section/Activity Section/activity.css b/src/components/Body Section/Activity Section/activity.css index ad62225b..3ba55494 100644 --- a/src/components/Body Section/Activity Section/activity.css +++ b/src/components/Body Section/Activity Section/activity.css @@ -1 +1,76 @@ -/*# sourceMappingURL=activity.css.map */ \ No newline at end of file +/* Colours & Styles - Default config */ +:root { + --PrimaryColor: hsl(94, 59%, 35%); + --HoverColor: #bdf094; + --paleGreen: hsl(96, 75%, 89%); + --whiteColor: hsl(0, 0%, 100%); + --blackColor: hsl(0, 0%, 18%); + --textColor: hsl(240, 1%, 48%); + --bgColor: hsl(220, 10%, 94%); + --greyText: rgb(190, 190, 190); + --inputColor: hsl(330, 12%, 97%); + --itemCardColor: hsl(120, 5%, 88%); + --itemCardHover: hsl(120, 27%, 87%); + /* Font & typography */ + --biggestFontSize: 2.5rem; + --h1FontSize: 1.5rem; + --h2FontSize: 1.25rem; + --h3FontSize: 1rem; + --normalFontSize: .938rem; + --smallFontSize: .813rem; + --smallestFontSize: .75rem; +} + +.activitySection { + flex-basis: 50%; +} +.activitySection .heading { + width: 100%; + justify-content: space-between; +} +.activitySection .heading h1 { + font-size: var(--h2FontSize); + color: var(--blackColor); + fonr-weight: 700; +} +.activitySection .heading .btn { + border: 1px solid transparent; +} +.activitySection .heading .btn:hover { + border: 1px solid var(--PrimaryColor); +} +.activitySection .secContainer { + margin-top: 1rem; +} +.activitySection .secContainer .singleCustomer { + align-items: flex-start; + justify-content: space-between; +} +.activitySection .secContainer .singleCustomer img { + width: 40px; + height: 40px; + -o-object-fit: cover; + object-fit: cover; + border-radius: 50%; + box-shadow: 0 2px 4px var(--itemCardColor); + margin-right: 1rem; +} +.activitySection .secContainer .singleCustomer .customerDetails { + flex: 1; +} +.activitySection .secContainer .singleCustomer .customerDetails .name { + font-size: var(--h3FontSize); + font-weight: 600; + color: var(--blackColor); + display: block; +} +.activitySection .secContainer .singleCustomer .customerDetails small { + font-weight: 500; + color: var(--textColor); + font-size: var(--smallFontSize); +} +.activitySection .secContainer .singleCustomer .duration { + color: var(--textColor); + font-weight: 500; + font-size: var(--smallestFontSize); +}/*# sourceMappingURL=activity.css.map */ \ No newline at end of file diff --git a/src/components/Body Section/Activity Section/activity.css.map b/src/components/Body Section/Activity Section/activity.css.map index 5b6fe39d..6ff3e8ab 100644 --- a/src/components/Body Section/Activity Section/activity.css.map +++ b/src/components/Body Section/Activity Section/activity.css.map @@ -1 +1 @@ -{"version":3,"sources":[],"names":[],"mappings":"","file":"activity.css"} \ No newline at end of file +{"version":3,"sources":["activity.scss","activity.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EACA,kCAAA;EACA,mCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADGA;EACI,eAAA;ACAJ;ADEI;EACI,WAAA;EACA,8BAAA;ACAR;ADEQ;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;ACAZ;ADGQ;EACI,6BAAA;ACDZ;ADIQ;EACI,qCAAA;ACFZ;ADMI;EACI,gBAAA;ACJR;ADMQ;EACI,uBAAA;EACA,8BAAA;ACJZ;ADMY;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;EACA,0CAAA;EACA,kBAAA;ACJhB;ADOY;EACI,OAAA;ACLhB;ADOgB;EACI,4BAAA;EACA,gBAAA;EACA,wBAAA;EACA,cAAA;ACLpB;ADQgB;EACI,gBAAA;EACA,uBAAA;EACA,+BAAA;ACNpB;ADUY;EACI,uBAAA;EACA,gBAAA;EACA,kCAAA;ACRhB","file":"activity.css"} \ No newline at end of file diff --git a/src/components/Body Section/Activity Section/activity.scss b/src/components/Body Section/Activity Section/activity.scss index e69de29b..1b3027bf 100644 --- a/src/components/Body Section/Activity Section/activity.scss +++ b/src/components/Body Section/Activity Section/activity.scss @@ -0,0 +1,87 @@ +/* Colours & Styles - Default config */ +:root{ + --PrimaryColor: hsl(94, 59%, 35%); + --HoverColor: #bdf094; + --paleGreen: hsl(96, 75%, 89%); + --whiteColor: hsl(0, 0%, 100%); + --blackColor: hsl(0, 0%, 18%); + --textColor: hsl(240, 1%, 48%); + --bgColor: hsl(220, 10%, 94%); + --greyText: rgb(190, 190, 190); + --inputColor: hsl(330, 12%, 97%); + --itemCardColor: hsl(120, 5%, 88%); + --itemCardHover: hsl(120, 27%, 87%); + + /* Font & typography */ + --biggestFontSize: 2.5rem; + --h1FontSize: 1.5rem; + --h2FontSize: 1.25rem; + --h3FontSize: 1rem; + --normalFontSize: .938rem; + --smallFontSize: .813rem; + --smallestFontSize: .75rem; +} + +.activitySection{ + flex-basis: 50%; + + .heading{ + width: 100%; + justify-content: space-between; + + h1{ + font-size: var(--h2FontSize); + color: var(--blackColor); + fonr-weight: 700; + } + + .btn{ + border: 1px solid transparent + } + + .btn:hover{ + border: 1px solid var(--PrimaryColor); + } + } + + .secContainer{ + margin-top: 1rem; + + .singleCustomer{ + align-items: flex-start; + justify-content: space-between; + + img{ + width: 40px; + height: 40px; + object-fit: cover; + border-radius: 50%; + box-shadow: 0 2px 4px var(--itemCardColor); + margin-right: 1rem; + } + + .customerDetails{ + flex: 1; + + .name{ + font-size: var(--h3FontSize); + font-weight: 600; + color: var(--blackColor); + display: block; + } + + small{ + font-weight: 500; + color: var(--textColor); + font-size: var(--smallFontSize); + } + } + + .duration{ + color: var(--textColor); + font-weight: 500; + font-size: var(--smallestFontSize); + } + } + } +} \ No newline at end of file diff --git a/src/components/Body Section/Body.jsx b/src/components/Body Section/Body.jsx index 67abb6cb..1f3f7349 100644 --- a/src/components/Body Section/Body.jsx +++ b/src/components/Body Section/Body.jsx @@ -12,6 +12,7 @@ const Body = () => {
+
) diff --git a/src/components/Body Section/Listing Section/Listing.jsx b/src/components/Body Section/Listing Section/Listing.jsx index 0edc369b..ebf4a0f7 100644 --- a/src/components/Body Section/Listing Section/Listing.jsx +++ b/src/components/Body Section/Listing Section/Listing.jsx @@ -3,7 +3,7 @@ import './listing.css'; // Icon & Asset imports ===> import { BsArrowRightShort } from 'react-icons/bs'; -import { AiFillHeart } from 'react-icons/ai'; +import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai'; import tesspic from '../../../Assets/StatElements/TessStat.png'; const Listing = () => { @@ -21,6 +21,69 @@ const Listing = () => { Tess telescope {/* Replace with pic of drone/rover/mineral */}

Annual Spread

+
+ + Tess telescope {/* Replace with pic of drone/rover/mineral */} +

Annual Spread

+
+
+ + Tess telescope {/* Replace with pic of drone/rover/mineral */} +

Annual Spread

+
+
+ + Tess telescope {/* Replace with pic of drone/rover/mineral */} +

Annual Spread

+
+ +
+
+
+

Top Sellers

+ +
+
+
+ User Image {/* Profile pic of the user being referenced | For now just create a for loop to sort through each user from Supabase */} + User Image + User Image + User Image +
+
+ + 14.556 $SK sold
+ + 21 Sellers 7 days + + +
+
+
+
+
+

Featured Sellers

+ +
+
+
+ User Image + User Image + User Image + User Image +
+
+ + 1,245 $SK sold
+ + 26 Sellers 7 days + + +
+
+
) diff --git a/src/components/Body Section/Listing Section/listing.css b/src/components/Body Section/Listing Section/listing.css index 5c4bbf15..67a97a46 100644 --- a/src/components/Body Section/Listing Section/listing.css +++ b/src/components/Body Section/Listing Section/listing.css @@ -9,6 +9,8 @@ --bgColor: hsl(220, 10%, 94%); --greyText: rgb(190, 190, 190); --inputColor: hsl(330, 12%, 97%); + --itemCardColor: hsl(120, 5%, 88%); + --itemCardHover: hsl(120, 27%, 87%); /* Font & typography */ --biggestFontSize: 2.5rem; --h1FontSize: 1.5rem; @@ -32,7 +34,7 @@ font-weight: 700; } .listingSection .heading .btn { - border: 1px solid transparent; + border: 1px solid var(--transparent); } .listingSection .heading .btn:hover { border: 1px solid var(--PrimaryColor); @@ -40,4 +42,81 @@ .listingSection .secContainer { width: 100%; margin: 1rem 0; + gap: 1rem; + flex-wrap: wrap; + justify-content: space-between; +} +.listingSection .secContainer .singleItem { + position: relative; + width: 130px; + height: 150px; + display: flex; + align-items: center; + flex-direction: column; + padding: 1rem; + border-radius: 15px; + background: var(--itemCardColor); +} +.listingSection .secContainer .singleItem:hover { + background: var(--itemCardHover); + box-shadow: 0 2px 2px var(--inputColor); +} +.listingSection .secContainer .singleItem img { + max-width: 100px; +} +.listingSection .secContainer .singleItem .icon { + position: absolute; + top: 10px; + right: 10px; + color: var(--PrimaryColor); +} +.listingSection .secContainer .singleItem h3 { + font-size: var(--h3FontSize); + color: var(--blackColor); + padding: 1rem 0; +} +.listingSection .sellers { + width: 100%; + justify-content: space-between; + gap: 1rem; + align-items: flex-start; +} +.listingSection .sellers .topSellers .heading, .listingSection .sellers .featuredSellers .heading { + padding: 1rem 0; +} +.listingSection .sellers .topSellers .heading .btn, .listingSection .sellers .featuredSellers .heading .btn { + padding: 0.5rem 1rem; +} +.listingSection .sellers .topSellers .card, .listingSection .sellers .featuredSellers .card { + padding: 1rem 2rem; + border-radius: 1rem; + background: var(--whiteColor); + gap: 1rem; + box-shadow: 0 2px 4px var(--inputColor); +} +.listingSection .sellers .topSellers .card .users, .listingSection .sellers .featuredSellers .card .users { + padding-right: 1rem; + border-right: 2px solid var(--greyText); +} +.listingSection .sellers .topSellers .card .users img, .listingSection .sellers .featuredSellers .card .users img { + width: 30px; + height: 30px; + border-radius: 50px; + -o-object-fit: cover; + object-fit: cover; + border: 2px solid var(--inputColor); + transition: 0.5s ease; +} +.listingSection .sellers .topSellers .card .users img:hover, .listingSection .sellers .featuredSellers .card .users img:hover { + transform: translateY(-10px); +} +.listingSection .sellers .topSellers .card .cardText span, .listingSection .sellers .featuredSellers .card .cardText span { + color: var(--blackColor); + font-weight: 500; +} +.listingSection .sellers .topSellers .card .cardText small, .listingSection .sellers .featuredSellers .card .cardText small { + font-weight: 400; +} +.listingSection .sellers .topSellers .card .cardText small .date, .listingSection .sellers .featuredSellers .card .cardText small .date { + margin-left: 1 rem; }/*# sourceMappingURL=listing.css.map */ \ No newline at end of file diff --git a/src/components/Body Section/Listing Section/listing.css.map b/src/components/Body Section/Listing Section/listing.css.map index bef5c7dc..f944e508 100644 --- a/src/components/Body Section/Listing Section/listing.css.map +++ b/src/components/Body Section/Listing Section/listing.css.map @@ -1 +1 @@ -{"version":3,"sources":["listing.scss","listing.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADGA;EACI,eAAA;ACAJ;ADEI;EACI,WAAA;EACA,8BAAA;ACAR;ADEQ;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;ACAZ;ADGQ;EACI,6BAAA;ACDZ;ADGQ;EACI,qCAAA;ACDZ;ADKI;EACI,WAAA;EACA,cAAA;ACHR","file":"listing.css"} \ No newline at end of file +{"version":3,"sources":["listing.scss","listing.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EACA,kCAAA;EACA,mCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADGA;EACI,eAAA;ACAJ;ADEI;EACI,WAAA;EACA,8BAAA;ACAR;ADEQ;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;ACAZ;ADGQ;EACI,oCAAA;ACDZ;ADGQ;EACI,qCAAA;ACDZ;ADKI;EACI,WAAA;EACA,cAAA;EACA,SAAA;EACA,eAAA;EACA,8BAAA;ACHR;ADKQ;EACI,kBAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,gCAAA;ACHZ;ADKY;EACI,gCAAA;EACA,uCAAA;ACHhB;ADMY;EACI,gBAAA;ACJhB;ADOY;EACI,kBAAA;EACA,SAAA;EACA,WAAA;EACA,0BAAA;ACLhB;ADQY;EACI,4BAAA;EACA,wBAAA;EACA,eAAA;ACNhB;ADWI;EACI,WAAA;EACA,8BAAA;EACA,SAAA;EACA,uBAAA;ACTR;ADYY;EACI,eAAA;ACVhB;ADYgB;EACI,oBAAA;ACVpB;ADcY;EACI,kBAAA;EACA,mBAAA;EACA,6BAAA;EACA,SAAA;EACA,uCAAA;ACZhB;ADcgB;EACI,mBAAA;EACA,uCAAA;ACZpB;ADcoB;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,oBAAA;KAAA,iBAAA;EACA,mCAAA;EACA,qBAAA;ACZxB;ADcwB;EACI,4BAAA;ACZ5B;ADkBoB;EACI,wBAAA;EACA,gBAAA;AChBxB;ADmBoB;EACI,gBAAA;ACjBxB;ADkBwB;EACI,kBAAA;AChB5B","file":"listing.css"} \ No newline at end of file diff --git a/src/components/Body Section/Listing Section/listing.scss b/src/components/Body Section/Listing Section/listing.scss index 5398a526..5e0263b5 100644 --- a/src/components/Body Section/Listing Section/listing.scss +++ b/src/components/Body Section/Listing Section/listing.scss @@ -9,6 +9,8 @@ --bgColor: hsl(220, 10%, 94%); --greyText: rgb(190, 190, 190); --inputColor: hsl(330, 12%, 97%); + --itemCardColor: hsl(120, 5%, 88%); + --itemCardHover: hsl(120, 27%, 87%); /* Font & typography */ --biggestFontSize: 2.5rem; @@ -34,7 +36,7 @@ } .btn{ - border: 1px solid transparent; + border: 1px solid var(--transparent); } .btn:hover{ border: 1px solid var(--PrimaryColor); @@ -44,5 +46,99 @@ .secContainer{ width: 100%; margin: 1rem 0; + gap: 1rem; + flex-wrap: wrap; + justify-content: space-between; + + .singleItem{ + position: relative; + width: 130px; + height: 150px; + display: flex; + align-items: center; + flex-direction: column; + padding: 1rem; + border-radius: 15px; + background: var(--itemCardColor); + + &:hover{ + background: var(--itemCardHover); + box-shadow: 0 2px 2px var(--inputColor); + } + + img{ + max-width: 100px; + } + + .icon{ + position: absolute; + top: 10px; + right: 10px; + color: var(--PrimaryColor); + } + + h3{ + font-size: var(--h3FontSize); + color: var(--blackColor); + padding: 1rem 0; + } + } + } + + .sellers{ + width: 100%; + justify-content: space-between; + gap: 1rem; + align-items: flex-start; + + .topSellers, .featuredSellers{ + .heading{ + padding: 1rem 0; + + .btn{ + padding: .5rem 1rem; + } + } + + .card{ + padding: 1rem 2rem; + border-radius: 1rem; + background: var(--whiteColor); + gap: 1rem; + box-shadow: 0 2px 4px var(--inputColor); + + .users{ + padding-right: 1rem; + border-right: 2px solid var(--greyText); + + img{ + width: 30px; + height: 30px; + border-radius: 50px; + object-fit: cover; + border: 2px solid var(--inputColor); + transition: .5s ease; + + &:hover{ + transform: translateY(-10px); + } + } + } + + .cardText{ + span{ + color: var(--blackColor); + font-weight: 500; + } + + small{ + font-weight: 400; + .date{ + margin-left: 1 rem; + } + } + } + } + } } } \ No newline at end of file diff --git a/src/components/Body Section/Top Section/top.css b/src/components/Body Section/Top Section/top.css index 55303777..f6ea5286 100644 --- a/src/components/Body Section/Top Section/top.css +++ b/src/components/Body Section/Top Section/top.css @@ -190,4 +190,14 @@ } .topSection .cardSection .leftCard .main .imgDiv img { width: 200px; +} + +@media screen and (max-width: 990px) { + .cardSection { + flex-direction: column; + } + .cardSection .rightCard, .cardSection .leftCard { + width: 100%; + flex-basis: 100%; + } }/*# sourceMappingURL=top.css.map */ \ No newline at end of file diff --git a/src/components/Body Section/Top Section/top.css.map b/src/components/Body Section/Top Section/top.css.map index c8e15cf4..86dfe287 100644 --- a/src/components/Body Section/Top Section/top.css.map +++ b/src/components/Body Section/Top Section/top.css.map @@ -1 +1 @@ -{"version":3,"sources":["top.scss","top.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADII;EACI,8BAAA;ACDR;ADIY;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;ACFhB;ADKY;EACI,gCAAA;EACA,uBAAA;ACHhB;ADOQ;EACI,kBAAA;EACA,6BAAA;EACA,kBAAA;EACA,SAAA;EACA,uCAAA;ACLZ;ADOY;EACI,YAAA;EACA,aAAA;EACA,gBAAA;ACLhB;ADQY;EACI,uBAAA;ACNhB;ADOgB;EACI,0BAAA;ACLpB;ADUQ;EACI,SAAA;ACRZ;ADUY;EACI,iCAAA;EACA,6BAAA;EACA,kBAAA;EACA,YAAA;EACA,uCAAA;EACA,uBAAA;ACRhB;ADWY;EACI,mCAAA;EACA,mBAAA;EACA,aAAA;EACA,gBAAA;EACA,uCAAA;ACThB;ADWgB;EACI,WAAA;EACA,YAAA;EACA,mBAAA;ACTpB;ADeI;EACI,gBAAA;EACA,SAAA;ACbR;ADeQ;EACI,kBAAA;EACA,eAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;ACbZ;ADeY;EACI,kBAAA;EACA,YAAA;EACA,WAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;ACbhB;ADegB;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,qBAAA;ACbpB;ADiBY;EACI,YAAA;ACfhB;ADkBY;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;AChBhB;ADmBY;EACI,aAAA;EACA,uBAAA;EACA,gBAAA;ACjBhB;ADoBY;EACI,SAAA;AClBhB;ADoBgB;EACI,gBAAA;EACA,sBAAA;EACA,0BAAA;EACA,oCAAA;AClBpB;ADqBgB;EACI,gBAAA;EACA,kCAAA;EACA,uBAAA;ACnBpB;ADqBoB;EACI,4BAAA;EACA,0BAAA;ACnBxB;ADyBQ;EACI,eAAA;ACvBZ;ADwBY;EACI,kBAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACtBhB;ADwBgB;EACI,WAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;EACA,4BAAA;EACA,OAAA;EACA,SAAA;EACA,qBAAA;ACtBpB;ADyBgB;EACI,YAAA;ACvBpB;ADyBoB;EACI,4BAAA;EACA,oBAAA;EACA,wBAAA;ACvBxB;AD0BoB;EACI,WAAA;EACA,gBAAA;EACA,wBAAA;ACxBxB;AD0BwB;EACI,gCAAA;EACA,cAAA;EACA,0BAAA;EACA,gBAAA;EACA,iBAAA;ACxB5B;AD4BoB;EACI,gBAAA;EACA,eAAA;AC1BxB;AD4BwB;EACI,0BAAA;AC1B5B;AD2B4B;EACI,2BAAA;EACA,qBAAA;ACzBhC;AD+BgB;EACI,4BAAA;AC7BpB;AD+BoB;EACI,YAAA;AC7BxB","file":"top.css"} \ No newline at end of file +{"version":3,"sources":["top.scss","top.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADII;EACI,8BAAA;ACDR;ADIY;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;ACFhB;ADKY;EACI,gCAAA;EACA,uBAAA;ACHhB;ADOQ;EACI,kBAAA;EACA,6BAAA;EACA,kBAAA;EACA,SAAA;EACA,uCAAA;ACLZ;ADOY;EACI,YAAA;EACA,aAAA;EACA,gBAAA;ACLhB;ADQY;EACI,uBAAA;ACNhB;ADOgB;EACI,0BAAA;ACLpB;ADUQ;EACI,SAAA;ACRZ;ADUY;EACI,iCAAA;EACA,6BAAA;EACA,kBAAA;EACA,YAAA;EACA,uCAAA;EACA,uBAAA;ACRhB;ADWY;EACI,mCAAA;EACA,mBAAA;EACA,aAAA;EACA,gBAAA;EACA,uCAAA;ACThB;ADWgB;EACI,WAAA;EACA,YAAA;EACA,mBAAA;ACTpB;ADeI;EACI,gBAAA;EACA,SAAA;ACbR;ADeQ;EACI,kBAAA;EACA,eAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;ACbZ;ADeY;EACI,kBAAA;EACA,YAAA;EACA,WAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;ACbhB;ADegB;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,qBAAA;ACbpB;ADiBY;EACI,YAAA;ACfhB;ADkBY;EACI,4BAAA;EACA,wBAAA;EACA,gBAAA;AChBhB;ADmBY;EACI,aAAA;EACA,uBAAA;EACA,gBAAA;ACjBhB;ADoBY;EACI,SAAA;AClBhB;ADoBgB;EACI,gBAAA;EACA,sBAAA;EACA,0BAAA;EACA,oCAAA;AClBpB;ADqBgB;EACI,gBAAA;EACA,kCAAA;EACA,uBAAA;ACnBpB;ADqBoB;EACI,4BAAA;EACA,0BAAA;ACnBxB;ADyBQ;EACI,eAAA;ACvBZ;ADwBY;EACI,kBAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACtBhB;ADwBgB;EACI,WAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;EACA,4BAAA;EACA,OAAA;EACA,SAAA;EACA,qBAAA;ACtBpB;ADyBgB;EACI,YAAA;ACvBpB;ADyBoB;EACI,4BAAA;EACA,oBAAA;EACA,wBAAA;ACvBxB;AD0BoB;EACI,WAAA;EACA,gBAAA;EACA,wBAAA;ACxBxB;AD0BwB;EACI,gCAAA;EACA,cAAA;EACA,0BAAA;EACA,gBAAA;EACA,iBAAA;ACxB5B;AD4BoB;EACI,gBAAA;EACA,eAAA;AC1BxB;AD4BwB;EACI,0BAAA;AC1B5B;AD2B4B;EACI,2BAAA;EACA,qBAAA;ACzBhC;AD+BgB;EACI,4BAAA;AC7BpB;AD+BoB;EACI,YAAA;AC7BxB;;ADsCA;EACI;IACI,sBAAA;ECnCN;EDqCM;IACI,WAAA;IACA,gBAAA;ECnCV;AACF","file":"top.css"} \ No newline at end of file diff --git a/src/components/Body Section/Top Section/top.scss b/src/components/Body Section/Top Section/top.scss index 99b43b3b..fcd8f30f 100644 --- a/src/components/Body Section/Top Section/top.scss +++ b/src/components/Body Section/Top Section/top.scss @@ -224,4 +224,16 @@ } } } +} + +// Media Queries ==========> +@media screen and (max-width: 990px) { + .cardSection{ + flex-direction: column; + + .rightCard, .leftCard{ + width: 100%; + flex-basis: 100%; + } + } } \ No newline at end of file diff --git a/src/components/SideBar Section/sidebar.css b/src/components/SideBar Section/sidebar.css index 680cc273..46d028dd 100644 --- a/src/components/SideBar Section/sidebar.css +++ b/src/components/SideBar Section/sidebar.css @@ -61,7 +61,7 @@ bottom: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; - background: var(--PrimaryColor); + /* background: var(--PrimaryColor); */ } .sideBar .menuDiv .menuLists .listItem .menuLink, .sideBar .settingsDiv .menuLists .listItem .menuLink { color: var(--greyText); diff --git a/src/components/SideBar Section/sidebar.css.map b/src/components/SideBar Section/sidebar.css.map index 2353198e..40769cfc 100644 --- a/src/components/SideBar Section/sidebar.css.map +++ b/src/components/SideBar Section/sidebar.css.map @@ -1 +1 @@ -{"version":3,"sources":["sidebar.scss","sidebar.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADGA;EACI,6BAAA;EACA,uCAAA;EACA,UAAA;EACA,YAAA;EACA,SAAA;EACA,cAAA;ACAJ;ADEI;EACI,wBAAA;EACA,eAAA;ACAR;ADEQ;EACI,gBAAA;EACA,oBAAA;EACA,iCAAA;EACA,kBAAA;EACA,eAAA;ACAZ;ADGQ;EACI,4BAAA;EACA,qBAAA;ACDZ;ADMQ;EACI,4BAAA;EACA,wBAAA;EACA,wBAAA;ACJZ;ADQY;EACI,sBAAA;EACA,WAAA;EACA,kBAAA;ACNhB;ADQgB;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,UAAA;EACA,SAAA;EACA,6BAAA;EACA,gCAAA;EACA,+BAAA;ACNpB;ADSgB;EACI,sBAAA;EACA,gBAAA;ACPpB;ADQoB;EACI,oBAAA;ACNxB;ADUgB;EACI,0BAAA;EACA,aAAA;ACRpB;ADWgB;EACI,YAAA;EACA,oBAAA;ACTpB;ADeI;EACI,WAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;ACbR;ADeQ;EACI,kBAAA;EACA,6BAAA;EACA,oCAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,yBAAA;EACA,YAAA;ACbZ;ADgBQ;EACI,kBAAA;EACA,aAAA;EACA,6BAAA;EACA,mBAAA;EACA,gBAAA;ACdZ;ADgBY;EACI,4BAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,wBAAA;ACdhB;ADiBY;EACI,gCAAA;EACA,uBAAA;EACA,oBAAA;EACA,gBAAA;ACfhB;ADkBY;EACI,kBAAA;EACA,uBAAA;EACA,aAAA;AChBhB;ADmBY;EACI,kBAAA;EACA,4BAAA;EACA,kBAAA;EACA,YAAA;ACjBhB;ADoBY;EACI,aAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;AClBhB;ADqBY;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,YAAA;EACA,UAAA;ACnBhB","file":"sidebar.css"} \ No newline at end of file +{"version":3,"sources":["sidebar.scss","sidebar.css"],"names":[],"mappings":"AAAA,sCAAA;AACA;EACI,iCAAA;EACA,qBAAA;EACA,8BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EAEA,sBAAA;EACA,yBAAA;EACA,oBAAA;EACA,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,wBAAA;EACA,0BAAA;ACAJ;;ADGA;EACI,6BAAA;EACA,uCAAA;EACA,UAAA;EACA,YAAA;EACA,SAAA;EACA,cAAA;ACAJ;ADEI;EACI,wBAAA;EACA,eAAA;ACAR;ADEQ;EACI,gBAAA;EACA,oBAAA;EACA,iCAAA;EACA,kBAAA;EACA,eAAA;ACAZ;ADGQ;EACI,4BAAA;EACA,qBAAA;ACDZ;ADMQ;EACI,4BAAA;EACA,wBAAA;EACA,wBAAA;ACJZ;ADQY;EACI,sBAAA;EACA,WAAA;EACA,kBAAA;ACNhB;ADQgB;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,OAAA;EACA,UAAA;EACA,SAAA;EACA,6BAAA;EACA,gCAAA;EACA,qCAAA;ACNpB;ADSgB;EACI,sBAAA;EACA,gBAAA;ACPpB;ADQoB;EACI,oBAAA;ACNxB;ADUgB;EACI,0BAAA;EACA,aAAA;ACRpB;ADWgB;EACI,YAAA;EACA,oBAAA;ACTpB;ADeI;EACI,WAAA;EACA,aAAA;EACA,kBAAA;EACA,kBAAA;ACbR;ADeQ;EACI,kBAAA;EACA,6BAAA;EACA,oCAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,yBAAA;EACA,YAAA;ACbZ;ADgBQ;EACI,kBAAA;EACA,aAAA;EACA,6BAAA;EACA,mBAAA;EACA,gBAAA;ACdZ;ADgBY;EACI,4BAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,wBAAA;ACdhB;ADiBY;EACI,gCAAA;EACA,uBAAA;EACA,oBAAA;EACA,gBAAA;ACfhB;ADkBY;EACI,kBAAA;EACA,uBAAA;EACA,aAAA;AChBhB;ADmBY;EACI,kBAAA;EACA,4BAAA;EACA,kBAAA;EACA,YAAA;ACjBhB;ADoBY;EACI,aAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;AClBhB;ADqBY;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,YAAA;EACA,UAAA;ACnBhB","file":"sidebar.css"} \ No newline at end of file diff --git a/src/components/SideBar Section/sidebar.scss b/src/components/SideBar Section/sidebar.scss index 05e59d8d..c2d4ea71 100644 --- a/src/components/SideBar Section/sidebar.scss +++ b/src/components/SideBar Section/sidebar.scss @@ -68,7 +68,7 @@ bottom: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; - background: var(--PrimaryColor); + /* background: var(--PrimaryColor); */ } .menuLink{