style: update tertiary button

🔧 chore: use proper type
🔧 chore: replace bgClass with className
2024-02-28 15:45:57 +08:00 · 2024-02-28 14:20:12 +07:00 · 2024-02-28 14:19:02 +07:00 · 2024-02-28 13:51:35 +07:00 · 2024-02-28 13:49:11 +07:00 · 2024-02-28 13:46:09 +07:00
44 changed files with 460 additions and 62 deletions
@@ -4,9 +4,18 @@
  ```bash
  yarn
  ```
+  ```bash
+  brew install jq # if you do not have jq installed already
+  ```
+
+
+
+
+Example of how to make the necessary deploy edits [here](https://github.com/snowball-tools/snowballtools-base/pull/131/files).

 - Replace variables in the following files
  - [records/application-deployment-request.yml](records/application-deployment-request.yml)
+    - update the name & application version numbers
    - `<CURRENT_DATE_TIME>`: Replace with current time which can be generated by command `date -u`
      ```yml
      # Example
@@ -42,9 +51,10 @@
        repository_ref: <COMMIT_HASH>
    ```
  - [deploy-frontend.sh](deploy-frontend.sh)
+    Also be sure to update the app version
    ```bash
    ...
-    RCD_APP_VERSION="0.1.0"
+    RCD_APP_VERSION="<NEW_VERSION>"
    REPO_REF="<COMMIT_HASH>"
    ...
    ```
@@ -71,6 +81,9 @@

 ## Troubleshoot

+- Check deployment status [here](https://console.laconic.com/deployer).
+- Check records [here](https://console.laconic.com/#/registry).
+
 - If deployment fails due to low bond balance
  - Check balances
    ```bash
@@ -83,4 +96,4 @@
  - Command to refill bond
    ```bash
    yarn laconic cns bond refill --id 8fcf44b2f326b4b63ac57547777f1c78b7d494e5966e508f09001af53cb440ac --type aphoton --quantity 10000000
-    ```
+    ```
@@ -4,8 +4,8 @@

 RECORD_FILE=records/application-record.yml
 CONFIG_FILE=config.yml
-RCD_APP_VERSION="0.1.0"
-REPO_REF="353fd0f6219a955be186b5914e93baa9058b4473"
+RCD_APP_VERSION="0.1.3"
+REPO_REF="513ca69d01bee857cf207a0605483205b384e218"

 # Publish ApplicationRecord
 RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
@@ -1,8 +1,8 @@
 record:
  type: ApplicationDeploymentRequest
  version: '1.0.0'
-  name: snowballtools-base-frontend@0.1.0
-  application: crn://snowballtools/applications/snowballtools-base-frontend@0.1.0
+  name: snowballtools-base-frontend@0.1.3
+  application: crn://snowballtools/applications/snowballtools-base-frontend@0.1.3
  dns: dashboard
  config:
    env:
@@ -16,6 +16,6 @@ record:
      LACONIC_HOSTED_CONFIG_app_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
  meta:
    # Set CURRENT_DATE_TIME; Use command date -u
-    note: Added by Snowball @ <CURRENT_DATE_TIME>
+    note: Added by Snowball @ Tue Feb 27 17:24:06 UTC 2024
    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
-    repository_ref: 353fd0f6219a955be186b5914e93baa9058b4473
+    repository_ref: 513ca69d01bee857cf207a0605483205b384e218
@@ -1,10 +1,10 @@
 record:
  type: ApplicationRecord
-  version: 0.0.6
-  repository_ref: 353fd0f6219a955be186b5914e93baa9058b4473
+  version: 0.0.11
+  repository_ref: 513ca69d01bee857cf207a0605483205b384e218
  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
  app_type: webapp
  # name is set to repo name
  name: snowballtools-base-frontend
  # app_version is set from package.json
-  app_version: 0.1.0
+  app_version: 0.1.3
@@ -1,6 +1,6 @@
 {
  "name": "frontend",
-  "version": "0.1.0",
+  "version": "0.1.3",
  "private": true,
  "dependencies": {
    "@fontsource-variable/jetbrains-mono": "^5.0.19",
@@ -102,10 +102,14 @@ const Sidebar = () => {
        <Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
          <Tabs.List>
            {[
-              { title: 'Projects', icon: <FolderIcon /> },
-              { title: 'Settings', icon: <SettingsSlidersIcon /> },
-            ].map(({ title, icon }, index) => (
-              <NavLink to={`/${orgSlug}/${title}`} key={index}>
+              { title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> },
+              {
+                title: 'Settings',
+                url: `/${orgSlug}/settings`,
+                icon: <SettingsSlidersIcon />,
+              },
+            ].map(({ title, icon, url }, index) => (
+              <NavLink to={url} key={index}>
                <Tabs.Trigger icon={icon} value={title}>
                  {title}
                </Tabs.Trigger>
@@ -7,7 +7,12 @@ import {
  GitIcon,
  EllipsesIcon,
  SnowballIcon,
+  GithubIcon,
+  GitTeaIcon,
 } from 'components/shared/CustomIcon';
+import { useToast } from 'components/shared/Toast';
+import { IconWithFrame } from 'components/shared/IconWithFrame';
+import { Heading } from 'components/shared/Heading';

 const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
@@ -23,47 +28,68 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
 }: ConnectAccountInterface) => {
  const client = useGQLClient();

+  const { toast, dismiss } = useToast();
+
  const handleCode = async (code: string) => {
    // Pass code to backend and get access token
    const {
      authenticateGitHub: { token },
    } = await client.authenticateGitHub(code);
    onToken(token);
+    toast({
+      onDismiss: dismiss,
+      id: 'connected-to-github',
+      title: 'The Git account is connected.',
+      variant: 'success',
+    });
  };

  // TODO: Use correct height
  return (
    <div className="bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
-      <div className="w-52 h-16 justify-center items-center gap-4 inline-flex">
-        <div className="w-16 h-16 bg-blue-100 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 inline-flex">
-          <GitIcon />
+      <div className="flex flex-col items-center max-w-[420px]">
+        {/** Icons */}
+        <div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
+          <IconWithFrame icon={<GitIcon />} />
+          <EllipsesIcon className="items-center gap-1.5 flex" />
+          <IconWithFrame className="bg-blue-400" icon={<SnowballIcon />} />
        </div>
-        <EllipsesIcon className="items-center gap-1.5 flex" />
-        <div className="w-16 h-16 bg-blue-400 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 flex">
-          <SnowballIcon />
+        {/** Text */}
+        <div className="flex flex-col gap-1.5 mb-6">
+          <Heading className="text-xl font-medium">
+            Connect to your Git account
+          </Heading>
+          <p className="text-center text-elements-mid-em">
+            Once connected, you can import a repository from your account or
+            start with one of our templates.
+          </p>
        </div>
-      </div>
-      <div>
-        <div className="text-center text-slate-900 text-xl font-medium leading-7">
-          Connect to your Git account
+        {/** CTA Buttons */}
+        <div className="flex flex-col w-full sm:w-auto sm:flex-row gap-2 sm:gap-3">
+          <OauthPopup
+            url={GITHUB_OAUTH_URL}
+            onCode={handleCode}
+            onClose={() => {}}
+            title="Snowball"
+            width={1000}
+            height={1000}
+          >
+            <Button
+              className="w-full sm:w-auto"
+              leftIcon={<GithubIcon />}
+              variant="tertiary"
+            >
+              Connect to GitHub
+            </Button>
+          </OauthPopup>
+          <Button
+            className="w-full sm:w-auto"
+            leftIcon={<GitTeaIcon />}
+            variant="tertiary"
+          >
+            Connect to GitTea
+          </Button>
        </div>
-        <div className="text-center text-slate-600 text-base font-normal leading-normal">
-          Once connected, you can import a repository from your account or start
-          with one of our templates.
-        </div>
-      </div>
-      <div className="mt-2 flex gap-3">
-        <OauthPopup
-          url={GITHUB_OAUTH_URL}
-          onCode={handleCode}
-          onClose={() => {}}
-          title="Snowball"
-          width={1000}
-          height={1000}
-        >
-          <Button>Connect to GitHub</Button>
-        </OauthPopup>
-        <Button>Connect to Gitea</Button>
      </div>

      {/* TODO: Add ConnectAccountTabPanel */}
@@ -7,6 +7,7 @@ import { Chip, IconButton, Spinner } from '@material-tailwind/react';
 import { relativeTimeISO } from '../../../utils/time';
 import { GitRepositoryDetails } from '../../../types';
 import { useGQLClient } from '../../../context/GQLClientContext';
+import { GithubIcon, LockIcon } from 'components/shared/CustomIcon';

 interface ProjectRepoCardProps {
  repository: GitRepositoryDetails;
@@ -47,16 +48,18 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
      className="group flex items-center gap-4 text-gray-500 text-xs hover:bg-gray-100 p-2 cursor-pointer"
      onClick={createProject}
    >
-      <div>^</div>
+      <div className="w-10 h-10 bg-white rounded-md justify-center items-center gap-1.5 inline-flex">
+        <GithubIcon />
+      </div>
      <div className="grow">
        <div>
          <span className="text-black">{repository.full_name}</span>
          {repository.visibility === 'private' && (
            <Chip
-              className="normal-case inline ml-6 font-normal"
+              className="normal-case inline ml-6 font-normal text-xs text-xs bg-orange-50 border border-orange-200 text-orange-600 items-center gap-1 inline-flex"
              size="sm"
              value="Private"
-              icon={'^'}
+              icon={<LockIcon />}
            />
          )}
        </div>
@@ -9,6 +9,7 @@ import SearchBar from '../../SearchBar';
 import ProjectRepoCard from './ProjectRepoCard';
 import { GitOrgDetails, GitRepositoryDetails } from '../../../types';
 import AsyncSelect from '../../shared/AsyncSelect';
+import { GithubIcon } from 'components/shared/CustomIcon';

 const DEFAULT_SEARCHED_REPO = '';
 const REPOS_PER_PAGE = 5;
@@ -108,7 +109,7 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {

  return (
    <div className="p-4">
-      <div className="flex gap-2 mb-2">
+      <div className="flex gap-2 mb-2 items-center">
        <div className="basis-1/3">
          <AsyncSelect
            value={selectedAccount}
@@ -116,12 +117,14 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
          >
            {accounts.map((account) => (
              <Option key={account.id} value={account.login}>
-                ^ {account.login}
+                <div className="flex items-center gap-2 justify-start">
+                  <GithubIcon /> {account.login}
+                </div>
              </Option>
            ))}
          </AsyncSelect>
        </div>
-        <div className="basis-2/3">
+        <div className="basis-2/3 flex-grow flex items-center">
          <SearchBar
            value={searchedRepo}
            onChange={(event) => setSearchedRepo(event.target.value)}
@@ -14,6 +14,8 @@ export const buttonTheme = tv(
      'whitespace-nowrap',
      'focus-ring',
      'disabled:cursor-not-allowed',
+      'transition-colors',
+      'duration-150',
    ],
    variants: {
      size: {
@@ -61,14 +63,13 @@ export const buttonTheme = tv(
        tertiary: [
          'text-elements-on-tertiary',
          'border',
-          'border-border-interactive/10',
+          'border-border-interactive',
          'bg-controls-tertiary',
+          'shadow-button',
          'hover:bg-controls-tertiary-hovered',
          'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
          'focus-visible:bg-controls-tertiary-hovered',
          'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
          'disabled:text-elements-on-disabled',
          'disabled:bg-controls-disabled',
          'disabled:border-transparent',
@@ -81,10 +82,8 @@ export const buttonTheme = tv(
          'bg-transparent',
          'hover:bg-controls-tertiary-hovered',
          'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
          'focus-visible:bg-controls-tertiary-hovered',
          'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
          'disabled:text-elements-on-disabled',
          'disabled:bg-controls-disabled',
          'disabled:border-transparent',
@@ -109,10 +108,8 @@ export const buttonTheme = tv(
          'bg-transparent',
          'hover:bg-controls-tertiary-hovered',
          'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
          'focus-visible:bg-controls-tertiary-hovered',
          'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
          'disabled:text-elements-on-disabled',
          'disabled:bg-controls-disabled',
          'disabled:border-transparent',
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const GitTeaIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12.372 15.1312L8.40635 13.225C8.01573 13.0375 7.84698 12.5625 8.0376 12.1687L9.94385 8.20308C10.1314 7.81245 10.6064 7.6437 11.0001 7.83433C11.5376 8.0937 11.847 8.24058 11.847 8.24058L11.8439 4.82808L12.3657 4.82495L12.3689 8.48433C12.3689 8.48433 14.1626 9.24058 14.9657 9.73745C15.0814 9.80933 15.2845 9.94995 15.3689 10.1875C15.4345 10.3781 15.4314 10.5968 15.3376 10.7906L13.4314 14.7562C13.2376 15.1531 12.7626 15.3218 12.372 15.1312Z"
+        fill="white"
+      />
+      <path
+        d="M19.4595 4.68123C19.3314 4.5531 19.1595 4.55623 19.1595 4.55623C19.1595 4.55623 15.497 4.76248 13.6001 4.80623C13.1845 4.8156 12.772 4.82498 12.3626 4.8281C12.3626 6.04998 12.3626 7.27185 12.3626 8.4906C12.1907 8.40935 12.0157 8.32498 11.8439 8.24373C11.8439 7.10623 11.8407 4.83123 11.8407 4.83123C10.9345 4.84373 9.05324 4.76248 9.05324 4.76248C9.05324 4.76248 4.63449 4.5406 4.15324 4.49685C3.84699 4.4781 3.45011 4.43123 2.93449 4.54373C2.66261 4.59998 1.88761 4.77498 1.25324 5.38435C-0.153014 6.63748 0.206361 8.63123 0.250111 8.93123C0.303236 9.29685 0.465736 10.3125 1.24074 11.1969C2.67199 12.95 5.75324 12.9094 5.75324 12.9094C5.75324 12.9094 6.13136 13.8125 6.70949 14.6437C7.49074 15.6781 8.29386 16.4844 9.07511 16.5812C11.0439 16.5812 14.9782 16.5781 14.9782 16.5781C14.9782 16.5781 15.3532 16.5812 15.8626 16.2562C16.3001 15.9906 16.6907 15.525 16.6907 15.525C16.6907 15.525 17.0939 15.0937 17.6564 14.1094C17.8282 13.8062 17.972 13.5125 18.097 13.2344C18.097 13.2344 19.822 9.57498 19.822 6.01248C19.7876 4.93435 19.522 4.74373 19.4595 4.68123ZM3.92511 11.0594C3.11574 10.7937 2.77199 10.475 2.77199 10.475C2.77199 10.475 2.17511 10.0562 1.87511 9.23123C1.35949 7.84998 1.83136 7.00623 1.83136 7.00623C1.83136 7.00623 2.09386 6.3031 3.03449 6.06873C3.46574 5.9531 4.00324 5.97185 4.00324 5.97185C4.00324 5.97185 4.22511 7.8281 4.49386 8.9156C4.71886 9.8281 5.26886 11.3437 5.26886 11.3437C5.26886 11.3437 4.45324 11.2469 3.92511 11.0594ZM13.3095 14.4219C13.3095 14.4219 13.1189 14.875 12.697 14.9031C12.5157 14.9156 12.3751 14.8656 12.3751 14.8656C12.3751 14.8656 12.3657 14.8625 12.2095 14.8L8.68136 13.0812C8.68136 13.0812 8.34074 12.9031 8.28136 12.5937C8.21261 12.3406 8.36574 12.0281 8.36574 12.0281L10.0626 8.53123C10.0626 8.53123 10.2126 8.2281 10.4439 8.12498C10.4626 8.1156 10.5157 8.09373 10.5845 8.0781C10.8376 8.01248 11.147 8.1656 11.147 8.1656L14.6064 9.84373C14.6064 9.84373 15.0001 10.0219 15.0845 10.35C15.1439 10.5812 15.0689 10.7875 15.0282 10.8875C14.8314 11.3687 13.3095 14.4219 13.3095 14.4219Z"
+        fill="#609926"
+      />
+      <path
+        d="M10.2126 11.8781C9.95632 11.8813 9.73132 12.0594 9.67195 12.3094C9.61257 12.5594 9.73445 12.8187 9.95632 12.9344C10.1969 13.0594 10.5032 12.9906 10.6657 12.7656C10.8251 12.5437 10.8001 12.2375 10.6094 12.0437L11.3594 10.5094C11.4063 10.5125 11.4751 10.5156 11.5532 10.4937C11.6813 10.4656 11.7751 10.3813 11.7751 10.3813C11.9063 10.4375 12.0438 10.5 12.1876 10.5719C12.3376 10.6469 12.4782 10.725 12.6063 10.8C12.6344 10.8156 12.6626 10.8344 12.6938 10.8594C12.7438 10.9 12.8001 10.9562 12.8407 11.0312C12.9001 11.2031 12.7813 11.4969 12.7813 11.4969C12.7094 11.7344 12.2063 12.7656 12.2063 12.7656C11.9532 12.7594 11.7282 12.9219 11.6532 13.1562C11.5719 13.4094 11.6876 13.6969 11.9313 13.8219C12.1751 13.9469 12.4751 13.875 12.6344 13.6562C12.7907 13.4437 12.7782 13.1469 12.6001 12.95C12.6594 12.8344 12.7157 12.7188 12.7751 12.5969C12.9313 12.2719 13.1969 11.6469 13.1969 11.6469C13.2251 11.5938 13.3751 11.325 13.2813 10.9812C13.2032 10.625 12.8876 10.4594 12.8876 10.4594C12.5063 10.2125 11.9751 9.98438 11.9751 9.98438C11.9751 9.98438 11.9751 9.85625 11.9407 9.7625C11.9063 9.66562 11.8532 9.60313 11.8188 9.56563C11.9657 9.2625 12.1126 8.9625 12.2594 8.65938C12.1313 8.59688 12.0063 8.53437 11.8782 8.46875C11.7282 8.775 11.5751 9.08438 11.4251 9.39062C11.2157 9.3875 11.0219 9.5 10.9219 9.68437C10.8157 9.88125 10.8376 10.125 10.9813 10.3031C10.7251 10.8281 10.4688 11.3531 10.2126 11.8781Z"
+        fill="#609926"
+      />
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const GithubIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.9702 0.206024C4.45694 0.206024 0 4.69582 0 10.2503C0 14.6903 2.85571 18.4487 6.81735 19.7789C7.31265 19.8789 7.49408 19.5628 7.49408 19.2968C7.49408 19.064 7.47776 18.2658 7.47776 17.4342C4.70429 18.033 4.12674 16.2368 4.12674 16.2368C3.68102 15.0728 3.02061 14.7736 3.02061 14.7736C2.11286 14.1583 3.08673 14.1583 3.08673 14.1583C4.09367 14.2248 4.62204 15.1893 4.62204 15.1893C5.51327 16.7191 6.94939 16.2868 7.52714 16.0207C7.60959 15.3721 7.87388 14.9232 8.15449 14.6738C5.94245 14.4409 3.6151 13.5762 3.6151 9.71807C3.6151 8.62051 4.01102 7.72256 4.63837 7.02419C4.53939 6.7748 4.19265 5.74358 4.73755 4.36337C4.73755 4.36337 5.57939 4.09725 7.47755 5.39439C8.29022 5.17453 9.12832 5.06268 9.9702 5.06174C10.812 5.06174 11.6702 5.17827 12.4627 5.39439C14.361 4.09725 15.2029 4.36337 15.2029 4.36337C15.7478 5.74358 15.4008 6.7748 15.3018 7.02419C15.9457 7.72256 16.3253 8.62051 16.3253 9.71807C16.3253 13.5762 13.998 14.4242 11.7694 14.6738C12.1327 14.9897 12.4461 15.5883 12.4461 16.5362C12.4461 17.8832 12.4298 18.9642 12.4298 19.2966C12.4298 19.5628 12.6114 19.8789 13.1065 19.7791C17.0682 18.4485 19.9239 14.6903 19.9239 10.2503C19.9402 4.69582 15.4669 0.206024 9.9702 0.206024Z"
+        fill="#0B1D2E"
+      />
+    </CustomIcon>
+  );
+};
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const LockIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 1.5C6.15889 1.5 4.6665 2.99238 4.6665 4.83333V6H4.49984C3.48732 6 2.6665 6.82081 2.6665 7.83333V12.8333C2.6665 13.8459 3.48732 14.6667 4.49984 14.6667H11.4998C12.5124 14.6667 13.3332 13.8459 13.3332 12.8333V7.83333C13.3332 6.82081 12.5124 6 11.4998 6H11.3332V4.83333C11.3332 2.99238 9.84079 1.5 7.99984 1.5ZM10.3332 6V4.83333C10.3332 3.54467 9.2885 2.5 7.99984 2.5C6.71117 2.5 5.6665 3.54467 5.6665 4.83333V6H10.3332ZM7.99984 8.83333C8.27598 8.83333 8.49984 9.05719 8.49984 9.33333V11.3333C8.49984 11.6095 8.27598 11.8333 7.99984 11.8333C7.72369 11.8333 7.49984 11.6095 7.49984 11.3333V9.33333C7.49984 9.05719 7.72369 8.83333 7.99984 8.83333Z"
+        fill="#EA580C"
+      />
+    </CustomIcon>
+  );
+};
@@ -22,6 +22,9 @@ export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
 export * from './NotificationBellIcon';
+export * from './GithubIcon';
+export * from './GitTeaIcon';
+export * from './LockIcon';
 export * from './PencilIcon';
 export * from './CheckRadioIcon';
 export * from './ChevronDownIcon';
@@ -0,0 +1,7 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const headingTheme = tv({
+  base: ['text-elements-high-em', 'font-display', 'font-normal'],
+});
+
+export type HeadingVariants = VariantProps<typeof headingTheme>;
@@ -0,0 +1,30 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { headingTheme, type HeadingVariants } from './Heading.theme';
+import { PolymorphicProps } from 'types/common';
+
+export type HeadingElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingProps<Element extends HeadingElementType> =
+  PropsWithChildren<PolymorphicProps<Element, HeadingVariants>>;
+
+export const Heading = <Element extends HeadingElementType>({
+  children,
+  as,
+  className,
+  ...props
+}: HeadingProps<Element>) => {
+  // Component is the element that will be rendered
+  const Component = as ?? 'h1';
+
+  return (
+    <Component
+      {...props}
+      className={headingTheme({
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+};
@@ -0,0 +1 @@
+export * from './Heading';
@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { cn } from 'utils/classnames';
+
+interface IconWithFrameProps extends ComponentPropsWithoutRef<'div'> {
+  icon: ReactNode;
+  hasHighlight?: boolean;
+}
+
+export const IconWithFrame = ({
+  icon,
+  className,
+  hasHighlight = true,
+  ...props
+}: IconWithFrameProps) => {
+  return (
+    <div
+      className={cn(
+        'relative justify-center items-center gap-2.5 inline-flex',
+        'w-16 h-16 rounded-2xl shadow-inner',
+        'border border-b-[3px] border-border-interactive border-opacity-10',
+        'bg-controls-secondary',
+        className,
+      )}
+      {...props}
+    >
+      {hasHighlight && (
+        <div className="bottom-0 absolute w-[37px] h-px bg-gradient-to-r from-gray-0/0 via-gray-0/50 to-gray-0/0" />
+      )}
+      {icon}
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './IconWithFrame';
@@ -23,7 +23,6 @@ export const tabsTheme = tv({
      // Vertical
      'data-[orientation=vertical]:px-3',
      'data-[orientation=vertical]:py-3',
-      'data-[orientation=vertical]:min-w-[240px]',
      'data-[orientation=vertical]:w-full',
      'data-[orientation=vertical]:focus-ring',
      'data-[orientation=vertical]:rounded-xl',
@@ -2,6 +2,153 @@
@tailwind components;
@tailwind utilities;

+@layer base {
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Thin.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ThinItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraLight.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraLightItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Light.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-LightItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Regular.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Italic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Medium.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-MediumItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-SemiBold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-SemiBoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Bold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-BoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraBold.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-ExtraBoldItalic.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-Black.woff2')
+      format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter Display';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url('../public/fonts/InterDisplay/InterDisplay-BlackItalic.woff2')
+      format('woff2');
+  }
+}
+
@layer utilities {
  .focus-ring {
    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
@@ -25,6 +25,12 @@ const ProjectSearch = () => {
    fetchUser();
  }, []);

+  const fetchOrgSlug = useCallback(async () => {
+    const { organizations } = await client.getOrganizations();
+    // TODO: Get the selected organization. This is temp
+    return organizations[0].slug;
+  }, []);
+
  return (
    <div>
      <div className="sticky top-0 bg-white z-30">
@@ -38,7 +44,15 @@ const ProjectSearch = () => {
              }}
            />
          </div>
-          <Button variant={'secondary'} iconOnly>
+          <Button
+            variant={'secondary'}
+            iconOnly
+            onClick={() => {
+              fetchOrgSlug().then((organizationSlug) => {
+                navigate(`/${organizationSlug}/projects/create`);
+              });
+            }}
+          >
            <PlusIcon />
          </Button>
          <Button variant={'ghost'} iconOnly>
@@ -1,10 +1,15 @@
 import React from 'react';
+import './Snow.css';

 const Login = () => {
  return (
-    <div className="grid grid-cols-5 h-screen bg-light-blue-50 py-10">
-      <div className="col-span-2"></div>
-      <div className="col-span-1">
+    <div className="flex items-center justify-center h-screen bg-snowball-900 snow">
+      <div className="flex flex-col items-center justify-center">
+        <img
+          src="/logo.svg"
+          alt="snowball logo"
+          className="w-32 h-32 rounded-full mb-4"
+        />
        <w3m-button />
      </div>
    </div>
@@ -0,0 +1,25 @@
+.snow {
+    width: 100%;
+    height: 100vh;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
+    background-position: 0px 0px;
+    animation: animatedBackground 230s linear infinite;
+  }
+  
+.snow div {
+    width: 100%;
+    height: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
+    background-position: 0px 0px;
+    animation: animatedBackground 260s linear infinite;
+}
+
+@keyframes animatedBackground {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 0px 11600px;
+    }
+}
@@ -1,3 +1,9 @@
+import {
+  type ElementType,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+} from 'react';
+
 /**
 * Construct a type by excluding common keys from one type to another.
 * @template T - The type from which to omit properties.
@@ -7,3 +13,15 @@
 * @returns A new type that includes all properties from T except those that are common with U.
 */
 export type OmitCommon<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
+
+export type PolymorphicProps<Element extends ElementType, Props> = Props &
+  Omit<ComponentPropsWithoutRef<Element>, 'as'> & {
+    as?: Element;
+  };
+
+// taken from : https://github.com/total-typescript/react-typescript-tutorial/blob/main/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
+type FixedForwardRef = <T, P = object>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => JSX.Element;
+
+export const fixedForwardRef = forwardRef as FixedForwardRef;
@@ -14,6 +14,7 @@ export default withMT({
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
+        display: ['Inter Display', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
@@ -151,7 +152,7 @@ export default withMT({
      },
      boxShadow: {
        button:
-          'inset 0px 0px 4px rgba(255, 255, 255, 0.25), inset 0px -2px 0px rgba(0, 0, 0, 0.04)',
+          '0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset',
        dropdown:
          '0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)',
        field: '0px 1px 2px rgba(0, 0, 0, 0.04)',
Author	SHA1	Message	Date
Zachery Ng	bd4a51c830	style: update tertiary button	2024-02-28 15:45:57 +08:00
Andre H	4a87c100d6	🔧 chore: use proper type	2024-02-28 14:20:12 +07:00
Andre H	3493d735b9	🔧 chore: replace bgClass with className	2024-02-28 14:19:02 +07:00
Andre H	a324d32ebf	🔧 chore: use Heading	2024-02-28 13:51:35 +07:00
Andre H	4519494be8	♻️ refactor: cherry pick fomr main	2024-02-28 13:49:11 +07:00
Andre H	319822c8e6	🔧 chore: add shadow to button	2024-02-28 13:46:09 +07:00
Andre H	c5273ff530	♻️ refactor: use IconWithFrame	2024-02-28 13:39:50 +07:00
Andre H	2585418ed6	🔧 chore: implement IconWithFrame common component	2024-02-28 13:39:30 +07:00
Andre H	89306ddcc7	🔧 chore: add toast	2024-02-28 11:19:09 +07:00
Andre H	3b67396c43	⚡️ feat: reskin connect github	2024-02-28 10:55:10 +07:00
Andre H	3535bd3a58	🔧 chore: add GitTeaIcon	2024-02-28 10:53:05 +07:00
Wahyu Kurniawan	282001c317	[T-4903: chore] Add inter display font (#127 ) * 🔧 chore: add `InterDisplay` font families * 🎨 style: add font `InterDisplay` to tailwind * 🔧 chore: update `yarn.lock` * ♻️ refactor: change `InterDisplay` to `inter Display` and `inter-display` to `display	2024-02-28 08:47:43 +07:00
Eric Lewis	2f62d086de	Merge pull request #131 from snowball-tools/ericlewis/deploy-2 chore(deployment): 1.1.3	2024-02-27 12:55:54 -05:00
Eric Lewis	4c544e8d15	chore: readme	2024-02-27 12:30:35 -05:00
Eric Lewis	a02ee13f9d	chore: deploy readme	2024-02-27 12:29:27 -05:00
Eric Lewis	e32a51a771	chore(deployment): 1.1.3	2024-02-27 12:25:20 -05:00
Eric Lewis	513ca69d01	Merge pull request #130 from snowball-tools/ericlewis/pretty-login feat: pretty login	2024-02-27 12:08:40 -05:00
Eric Lewis	e34b8d6a2e	Merge pull request #129 from snowball-tools/ericlewis/deploy chore: create new deployment	2024-02-27 12:07:43 -05:00
Eric Lewis	f4d5b77784	fix deploy	2024-02-27 11:56:22 -05:00
Eric Lewis	399b80ce3b	chore: create new deployment	2024-02-27 11:30:39 -05:00
Eric Lewis	fdaec2da94	feat: pretty login	2024-02-27 11:13:14 -05:00
Vivian Phung	13fc92bf0e	Merge pull request #128 from snowball-tools/ericlewis/prettify-select	2024-02-27 10:44:59 -05:00
Eric Lewis	8a8ee1d6ae	fix centering	2024-02-27 10:40:54 -05:00
Vivian Phung	5680961964	Merge pull request #122 from snowball-tools/repo	2024-02-27 09:18:20 -05:00
Vivian Phung	aa0ca8dd21	Merge pull request #121 from snowball-tools/search-area-plus	2024-02-27 09:18:03 -05:00
Vivian Phung	195471b888	Merge branch 'main' into repo	2024-02-27 00:07:22 -05:00
Vivian Phung	8ce531274d	center items in nav bar of git repos	2024-02-27 00:00:52 -05:00
Vivian Phung	6c38094093	github icon in search repo	2024-02-26 23:56:20 -05:00
Vivian Phung	95285d30dd	private repo + repo	2024-02-26 23:50:42 -05:00
Vivian Phung	61c8846400	org slug	2024-02-26 23:24:19 -05:00
Eric Lewis	d73c3c7daf	fix: select issue	2024-02-26 22:57:05 -05:00