🍄⚙️ ↣ Add more styling and static components for [#6] [HDASH-5]

.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

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 
 
 

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 (
-        <div>Activity</div>
+        <div className="activitySection">
+            <div className="heading flex">
+                <h1>Recent Activity</h1>
+                <button className="btn flex">
+                    See all activity <BsArrowRightShort />
+                </button>
+            </div>
+            <div className="secContainer grid">
+                <div className="singleCustomer flex">
+                    <img src={tesspic} alt="Customer image" />
+                    <div className="customerDetails">
+                        <span className="name">Liam Arbuckle</span> {/* Static data - import from realtime supa later */}
+                        <small>Ordered a new spaceship</small> {/* Ditto */}
+                    </div>
+                    <div className="duration">
+                        2 min ago
+                    </div>
+                </div>
+                <div className="singleCustomer flex">
+                    <img src={tesspic} alt="Customer image" />
+                    <div className="customerDetails">
+                        <span className="name">Liam Arbuckle</span> {/* Static data - import from realtime supa later */}
+                        <small>Ordered a new spaceship</small> {/* Ditto */}
+                    </div>
+                    <div className="duration">
+                        2 min ago
+                    </div>
+                </div>
+                <div className="singleCustomer flex">
+                    <img src={tesspic} alt="Customer image" />
+                    <div className="customerDetails">
+                        <span className="name">Liam Arbuckle</span> {/* Static data - import from realtime supa later */}
+                        <small>Ordered a new spaceship</small> {/* Ditto */}
+                    </div>
+                    <div className="duration">
+                        2 min ago
+                    </div>
+                </div>
+                <div className="singleCustomer flex">
+                    <img src={tesspic} alt="Customer image" />
+                    <div className="customerDetails">
+                        <span className="name">Liam Arbuckle</span> {/* Static data - import from realtime supa later */}
+                        <small>Ordered a new spaceship</small> {/* Ditto */}
+                    </div>
+                    <div className="duration">
+                        2 min ago
+                    </div>
+                </div>
+                <div className="singleCustomer flex">
+                    <img src={tesspic} alt="Customer image" />
+                    <div className="customerDetails">
+                        <span className="name">Liam Arbuckle</span> {/* Static data - import from realtime supa later */}
+                        <small>Ordered a new spaceship</small> {/* Ditto */}
+                    </div>
+                    <div className="duration">
+                        2 min ago
+                    </div>
+                </div>
+            </div>
+        </div>
     )
 }
 

src/components/Body Section/Activity Section/activity.css

@@ -1 +1,76 @@
-/*# sourceMappingURL=activity.css.map */
+/* 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 */

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);
+            }
+        }
+    }
+}

src/components/Body Section/Body.jsx

@@ -12,6 +12,7 @@ const Body = () => {
 
       <div className='bottom flex'>
         <Listing />
+        <Activity />
       </div>
     </div>
   )

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 = () => {
           <img src={tesspic} alt="Tess telescope" /> {/* Replace with pic of drone/rover/mineral */}
           <h3>Annual Spread</h3>
         </div>
+        <div className='singleItem'>
+          <AiOutlineHeart className='icon' />
+          <img src={tesspic} alt="Tess telescope" /> {/* Replace with pic of drone/rover/mineral */}
+          <h3>Annual Spread</h3>
+        </div>
+        <div className='singleItem'>
+          <AiOutlineHeart className='icon' />
+          <img src={tesspic} alt="Tess telescope" /> {/* Replace with pic of drone/rover/mineral */}
+          <h3>Annual Spread</h3>
+        </div>
+        <div className='singleItem'>
+          <AiOutlineHeart className='icon' />
+          <img src={tesspic} alt="Tess telescope" /> {/* Replace with pic of drone/rover/mineral */}
+          <h3>Annual Spread</h3>
+        </div>
+      </div>
+      <div className='sellers flex'>
+        <div className='topSellers'>
+          <div className='heading flex'>
+            <h3>Top Sellers</h3>
+            <button className='btn flex'>
+              See All <BsArrowRightShort className='icon' />
+            </button>
+          </div>
+          <div className='card flex'>
+            <div className='users'>
+              <img src={tesspic} alt="User Image" /> {/* Profile pic of the user being referenced | For now just create a for loop to sort through each user from Supabase */}
+              <img src={tesspic} alt="User Image" />
+              <img src={tesspic} alt="User Image" />
+              <img src={tesspic} alt="User Image" />
+            </div>
+            <div className='cardText'>
+              <span>
+                14.556 $SK sold <br />
+                <small>
+                  21 Sellers <span className='date'>7 days</span>
+                </small>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className='featuredSellers'>
+          <div className='heading flex'>
+            <h3>Featured Sellers</h3>
+            <button className='btn flex'>See All <BsArrowRightShort className='icon' /></button>
+          </div>
+          <div className='card flex'>
+            <div className='users'>
+              <img src={tesspic} alt="User Image" />
+              <img src={tesspic} alt="User Image" />
+              <img src={tesspic} alt="User Image" />
+              <img src={tesspic} alt="User Image" />
+            </div>
+            <div className='cardText'>
+              <span>
+                1,245 $SK sold <br />
+                <small>
+                  26 Sellers <span className='date'>7 days</span>
+                </small>
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )