UI updates

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Publish to Cloudflare Pages
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        working-directory: ./frontend
+        run: npm list
+
+      - name: Install dependencies
+        working-directory: ./frontend
+        run: npm install
+
+      - name: Build
+        working-directory: ./frontend
+        run: npm run build
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_PAGES_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: alliance-nft
+          directory: ./frontend/build
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

frontend/src/components/checkbox/checkbox.module.scss

@@ -0,0 +1,58 @@
+// @import 'scss/font_mixins';
+
+.checkbox {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  gap: 8px;
+  user-select: none;
+
+  &.checked .indicator {
+    opacity: 1;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .text {
+    flex: 1;
+    // @include Small;
+    color: var(--token-dark-500);
+  }
+
+  &.checked {
+    .track {
+      border: solid 1px var(--token-primary-400);
+    }
+
+    .text {
+      color: var(--token-light-white);
+      transition: color 100ms;
+    }
+  }
+}
+
+.track {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: solid 1px var(--token-dark-500);
+  border-radius: 6px;
+  width: 18px;
+  height: 18px;
+}
+
+.indicator {
+  background: var(--token-primary-500);
+  border-radius: 2px;
+  width: 8px;
+  height: 8px;
+
+  opacity: 0;
+  transition: opacity 100ms;
+}

frontend/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,30 @@
+import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import classNames from 'classnames/bind';
+import styles from './checkbox.module.scss';
+
+const cx = classNames.bind(styles);
+
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  checked?: boolean
+}
+
+const Checkbox = forwardRef(
+  (
+    { className, label, checked, ...attrs }: CheckboxProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const { disabled } = attrs;
+    return (
+      <label className={cx(styles.checkbox, { checked, disabled }, className)}>
+        <input {...attrs} type='checkbox' hidden ref={ref} />
+        <span className={styles.track}>
+          <span className={styles.indicator} />
+        </span>
+        <span className={styles.text}>{label}</span>
+      </label>
+    );
+  },
+);
+
+export default Checkbox;

frontend/src/components/filters/dropdowns/FilterDropdown.module.scss

@@ -0,0 +1,123 @@
+.filter__row {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.filter__dropdown__container {
+  max-width: 200px;
+  width: 100%;
+  display: flex;
+  gap: 24px;
+  position: relative;
+
+  .selector__wrapper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+
+    .selector {
+      padding: 8px 12px;
+      background: var(--token-light-500);
+      border: 1px solid var(--token-light-800);
+      border-radius: 8px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      appearance: none;
+      width: 100%;
+
+      .selected__wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      span {
+        display: flex;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--token-dark-500);
+      }
+
+      &.open {
+        background-color: var(--token-light-800);
+        border-color: var(--token-dark-700);
+      }
+
+      &:hover {
+        background-color: var(--token-light-800);
+        border-color: var(--token-dark-700);
+        transition: all .25s;
+      }
+    }
+
+    .clear__wrapper {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .options {
+    padding: 8px 2px 8px 12px;
+    position: absolute;
+    width: 100%;
+    background: var(--token-light-800);
+    border: 1px solid var(--token-dark-700);
+
+    border-radius: 8px;
+    z-index: 10;
+    max-height: 200px;
+    box-shadow: 0px 5px 7px 0px #0000009c;
+    top: 40px;
+    overflow: hidden;
+
+    .options__container {
+      padding-right: 10px;
+      padding-bottom: 8px;
+      overflow: auto;
+      max-height: 190px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      &::-webkit-scrollbar {
+        width: 12px;
+        display: block;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 16px;
+        background-color: hsl(0, 0%, 47%);
+        border: 2px solid var(--token-light-800);
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@media (max-width: 590px) {
+  .filter__row {
+    // flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .filter__dropdown__container {
+    .selector__wrapper {
+      .selector {
+        span {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}