Skip to content

Commit

Permalink
Fix: #662
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiv4nk4r
shiv4nk4r committed Jul 2, 2024
1 parent ad2b965 commit 7de68ee
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 64 deletions.
25 changes: 15 additions & 10 deletions frontend/app/src/components/molecules/nav-bar/nav-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Version, VersionTheme } from '@/components/ui/version';

import { useNavigate } from 'react-router-dom';
import api, { User } from '@/lib/api';
Expand Down Expand Up @@ -64,16 +65,20 @@ export default function MainNav({ user }: MainNavProps) {
return (
<div className="fixed top-0 w-screen h-16 border-b">
<div className="flex h-16 items-center pr-4 pl-4">
<button
onClick={() => toggleSidebarOpen()}
className="flex flex-row gap-4 items-center"
>
<img
src={theme == 'dark' ? hatchet : hatchetDark}
alt="Hatchet"
className="h-9 rounded"
/>
</button>
<div className="flex items-center gap-x-4">
<button
onClick={() => toggleSidebarOpen()}
className="flex flex-row gap-4 items-center"
>
<img
src={theme == 'dark' ? hatchet : hatchetDark}
alt="Hatchet"
className="h-9 rounded"
/>
</button>
<Version theme={VersionTheme.Dark} />
</div>

<div className="ml-auto flex items-center">
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand Down
20 changes: 20 additions & 0 deletions frontend/app/src/components/ui/version.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
export enum VersionTheme {
Dark = 'dark',
Light = 'light',
}

export interface IVersionProps {
theme: VersionTheme;
}

const Version = ({ theme }: IVersionProps) => {
return (
<div
className={`font-mono select-none leading-5 text-[0.625rem] font-bold px-[0.25rem] rounded-sm border-[0.0625rem] border-b-[0.1875rem] border-solid ${theme === VersionTheme.Dark ? 'bg-version-background-dark border-version-border-dark text-version-dark' : 'bg-version-background border-version-border text-version'} `}
>
{import.meta.env.VITE_VERSION ?? 'v1.0.0'}
</div>
);
};

export { Version };
126 changes: 72 additions & 54 deletions frontend/app/tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
Expand All @@ -10,9 +10,9 @@ module.exports = {
theme: {
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px",
'2xl': '1400px',
},
},
fontFamily: {
Expand All @@ -35,7 +35,14 @@ module.exports = {
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
serif: [
'ui-serif',
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
],
mono: [
'ui-monospace',
'SFMono-Regular',
Expand All @@ -49,91 +56,102 @@ module.exports = {
},
extend: {
colors: {
"purple": {
"50": "hsl(252, 82%, 95%)",
"100": "hsl(252, 82%, 90%)",
"200": "hsl(252, 82%, 80%)",
"300": "hsl(252, 82%, 70%)",
"400": "hsl(252, 82%, 60%)",
"500": "hsl(252, 82%, 49%)",
"600": "hsl(252, 82%, 40%)",
"700": "hsl(252, 82%, 30%)",
"800": "hsl(252, 82%, 20%)",
"900": "hsl(252, 82%, 10%)"
purple: {
50: 'hsl(252, 82%, 95%)',
100: 'hsl(252, 82%, 90%)',
200: 'hsl(252, 82%, 80%)',
300: 'hsl(252, 82%, 70%)',
400: 'hsl(252, 82%, 60%)',
500: 'hsl(252, 82%, 49%)',
600: 'hsl(252, 82%, 40%)',
700: 'hsl(252, 82%, 30%)',
800: 'hsl(252, 82%, 20%)',
900: 'hsl(252, 82%, 10%)',
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
version: {
DEFAULT: 'rgb(73, 80,87)',
dark: '#c9c9c9',
background: {
DEFAULT: 'rgb(248, 249, 250)',
dark: '#2e2e2e',
},
border: {
DEFAULT: 'rgb(140, 141, 143)',
dark: '#424242',
},
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
keyframes: {
"accordion-down": {
'accordion-down': {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
to: { height: 'var(--radix-accordion-content-height)' },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
"flip": {
flip: {
to: {
transform: "rotate(360deg)",
transform: 'rotate(360deg)',
},
},
"rotate": {
rotate: {
to: {
transform: "rotate(90deg)",
transform: 'rotate(90deg)',
},
},
"jiggle": {
jiggle: {
'0%, 100%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(5deg)' },
'75%': { transform: 'rotate(-5deg)' },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"flip": "flip 6s infinite steps(2, end)",
"rotate": "rotate 3s linear infinite both",
"jiggle": 'jiggle 0.5s ease-in-out',

'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
flip: 'flip 6s infinite steps(2, end)',
rotate: 'rotate 3s linear infinite both',
jiggle: 'jiggle 0.5s ease-in-out',
},
},
},
plugins: [require("tailwindcss-animate")],
}
plugins: [require('tailwindcss-animate')],
};

0 comments on commit 7de68ee

Please sign in to comment.