Skip to content

Commit 1a667d9

Browse files
kylecarbskylecarbs
committed
feat: Improve navbar to be more compact
The navbar was unnecessarily large before, which made the UI feel a bit bloaty from my perspective.
1 parent 50ad2f8 commit 1a667d9

File tree

12 files changed

+145
-22
lines changed

12 files changed

+145
-22
lines changed

‎site/src/AppRouter.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Route, Routes } from "react-router-dom"
33
import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
44
import { PreferencesLayout } from "./components/PreferencesLayout/PreferencesLayout"
55
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
6+
import { WorkspacesPage } from "./components/WorkspacesPage/WorkspacesPage"
67
import { IndexPage } from "./pages"
78
import { NotFoundPage } from "./pages/404Page/404Page"
89
import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"
@@ -75,6 +76,14 @@ export const AppRouter: React.FC = () => (
7576
</Route>
7677

7778
<Route path="workspaces">
79+
<Route
80+
index
81+
element={
82+
<AuthAndFrame>
83+
<WorkspacesPage />
84+
</AuthAndFrame>
85+
}
86+
/>
7887
<Route
7988
path=":workspace"
8089
element={

‎site/src/api/api.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,11 @@ export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Worksp
114114
return response.data
115115
}
116116

117+
export const getWorkspaces = async (userID = "me"): Promise<TypesGen.Workspace[]> => {
118+
const response = await axios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
119+
return response.data
120+
}
121+
117122
export const getWorkspaceByOwnerAndName = async (
118123
organizationID: string,
119124
username = "me",

‎site/src/app.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom"
55
import { SWRConfig } from "swr"
66
import { AppRouter } from "./AppRouter"
77
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
8-
import { light } from "./theme"
8+
import { dark } from "./theme"
99
import "./theme/globalFonts"
1010
import { XServiceProvider } from "./xServices/StateContext"
1111

@@ -31,7 +31,7 @@ export const App: React.FC = () => {
3131
}}
3232
>
3333
<XServiceProvider>
34-
<ThemeProvider theme={light}>
34+
<ThemeProvider theme={dark}>
3535
<CssBaseline />
3636
<AppRouter />
3737
<GlobalSnackbar />

‎site/src/components/NavbarView/NavbarView.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,15 @@ export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut, display
2121
<nav className={styles.root}>
2222
<List className={styles.fixed}>
2323
<ListItem className={styles.item}>
24-
<NavLink className={styles.logo} to="/">
24+
<NavLink className={styles.logo} to="/workspaces">
2525
<Logo fill="white" opacity={1} width={125} />
2626
</NavLink>
2727
</ListItem>
28+
<ListItem button className={styles.item}>
29+
<NavLink className={styles.link} to="/workspaces">
30+
Workspaces
31+
</NavLink>
32+
</ListItem>
2833
<ListItem button className={styles.item}>
2934
<NavLink className={styles.link} to="/templates">
3035
Templates
@@ -53,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
5358
"@media (display-mode: standalone)": {
5459
borderTop: `1px solid ${theme.palette.divider}`,
5560
},
56-
borderBottom: `1px solid #383838`,
61+
borderBottom: `1px solid ${theme.palette.divider}`,
5762
},
5863
fixed: {
5964
flex: 0,
@@ -68,9 +73,9 @@ const useStyles = makeStyles((theme) => ({
6873
display: "flex",
6974
height: navHeight,
7075
paddingLeft: theme.spacing(4),
71-
paddingRight: theme.spacing(2),
76+
paddingRight: theme.spacing(4),
7277
"& svg": {
73-
width: 125,
78+
width: 109,
7479
},
7580
},
7681
title: {
@@ -98,17 +103,16 @@ const useStyles = makeStyles((theme) => ({
98103
"&.active": {
99104
position: "relative",
100105
color: theme.palette.primary.contrastText,
106+
fontWeight: "bold",
101107

102108
"&::before": {
103-
content: `"{"`,
104-
left: 10,
105-
position: "absolute",
106-
},
107-
108-
"&::after": {
109-
content: `"}"`,
109+
content: `" "`,
110+
bottom: 0,
111+
left: theme.spacing(3),
112+
background: "#C16800",
113+
right: theme.spacing(3),
114+
height: 2,
110115
position: "absolute",
111-
right: 10,
112116
},
113117
},
114118
},

‎site/src/components/UserAvatar/UserAvatar.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Avatar from "@material-ui/core/Avatar"
2+
import { makeStyles } from "@material-ui/core/styles"
23
import React from "react"
34
import { firstLetter } from "../../util/firstLetter"
45

@@ -8,5 +9,17 @@ export interface UserAvatarProps {
89
}
910

1011
export const UserAvatar: React.FC<UserAvatarProps> = ({ username, className }) => {
11-
return <Avatar className={className}>{firstLetter(username)}</Avatar>
12+
const styles = useStyles()
13+
return (
14+
<Avatar variant="square" className={`${styles.avatar} ${className || ""}`}>
15+
{firstLetter(username)}
16+
</Avatar>
17+
)
1218
}
19+
20+
const useStyles = makeStyles((theme) => ({
21+
avatar: {
22+
borderRadius: 2,
23+
border: `1px solid ${theme.palette.divider}`,
24+
},
25+
}))

‎site/src/components/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { makeStyles } from "@material-ui/core"
2+
import { useMachine } from "@xstate/react"
3+
import React from "react"
4+
import { Margins } from "../../components/Margins/Margins"
5+
import { Stack } from "../../components/Stack/Stack"
6+
import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
7+
8+
export const Language = {
9+
title: "Workspaces",
10+
}
11+
12+
export const WorkspacesPage: React.FC = () => {
13+
const styles = useStyles()
14+
const [workspacesState] = useMachine(workspacesMachine)
15+
16+
console.log(workspacesState.context.workspaces)
17+
18+
return (
19+
<Stack spacing={4}>
20+
<Margins>
21+
<img className={styles.boxes} alt="boxes" src="/boxes.png" />
22+
</Margins>
23+
</Stack>
24+
)
25+
}
26+
27+
const useStyles = makeStyles(() => ({
28+
boxes: {
29+
position: "absolute",
30+
},
31+
}))

‎site/src/pages/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ import React from "react"
22
import { Navigate } from "react-router-dom"
33

44
export const IndexPage: React.FC = () => {
5-
return <Navigate to="/templates" replace />
5+
return <Navigate to="/workspaces" replace />
66
}

‎site/src/theme/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ export const MONOSPACE_FONT_FAMILY =
66
export const BODY_FONT_FAMILY = `"Inter", sans-serif`
77
export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
88
export const emptyBoxShadow = "none"
9-
export const navHeight = 56
9+
export const navHeight = 42
1010
export const maxWidth = 1380
1111
export const sidePadding = "50px"

‎site/src/theme/palettes.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export const darkPalette: CustomPalette = {
182182
info: lightPalette.info,
183183
error: lightPalette.error,
184184
codeBlock: {
185-
main: "rgb(24, 26, 27)",
185+
main: "#1F1F1F",
186186
contrastText: "rgba(255, 255, 255, 0.8)",
187187
button: {
188188
main: "rgba(255, 255, 255, 0.1)",
@@ -202,10 +202,10 @@ export const darkPalette: CustomPalette = {
202202
button: "#333333",
203203
},
204204
navbar: {
205-
main: "rgb(8, 9, 10)",
205+
main: "#292929",
206206
},
207207
background: {
208-
default: "rgb(24, 26, 27)",
208+
default: "#1F1F1F",
209209
paper: "rgb(31, 33, 35)",
210210
},
211211
text: {
@@ -222,5 +222,5 @@ export const darkPalette: CustomPalette = {
222222
disabled: "rgba(255, 255, 255, 0.1)",
223223
disabledBackground: "rgba(255, 255, 255, 0.12)",
224224
},
225-
divider: "rgba(255, 255, 255, 0.12)",
225+
divider: "#383838",
226226
}

‎site/src/xServices/workspaces/workspacesXService.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { assign, createMachine } from "xstate"
2+
import * as API from "../../api/api"
3+
import * as TypesGen from "../../api/typesGenerated"
4+
5+
interface WorkspaceContext {
6+
workspaces?: TypesGen.Workspace[]
7+
getWorkspacesError?: Error | unknown
8+
}
9+
10+
type WorkspaceEvent = { type: "GET_WORKSPACE"; workspaceId: string }
11+
12+
export const workspacesMachine = createMachine(
13+
{
14+
tsTypes: {} as import("./workspacesXService.typegen").Typegen0,
15+
schema: {
16+
context: {} as WorkspaceContext,
17+
events: {} as WorkspaceEvent,
18+
services: {} as {
19+
getWorkspaces: {
20+
data: TypesGen.Workspace[]
21+
}
22+
},
23+
},
24+
id: "workspaceState",
25+
initial: "gettingWorkspaces",
26+
states: {
27+
gettingWorkspaces: {
28+
invoke: {
29+
src: "getWorkspaces",
30+
id: "getWorkspaces",
31+
onDone: {
32+
target: "done",
33+
actions: ["assignWorkspaces", "clearGetWorkspacesError"],
34+
},
35+
onError: {
36+
target: "error",
37+
actions: "assignGetWorkspacesError",
38+
},
39+
},
40+
tags: "loading",
41+
},
42+
done: {},
43+
error: {},
44+
},
45+
},
46+
{
47+
actions: {
48+
assignWorkspaces: assign({
49+
workspaces: (_, event) => event.data,
50+
}),
51+
assignGetWorkspacesError: assign({
52+
getWorkspacesError: (_, event) => event.data,
53+
}),
54+
clearGetWorkspacesError: (context) => assign({ ...context, getWorkspacesError: undefined }),
55+
},
56+
services: {
57+
getWorkspaces: () => API.getWorkspaces(),
58+
},
59+
},
60+
)

‎site/static/boxes.png

61.5 KB
Loading

‎site/webpack.dev.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,9 @@ const config: Configuration = {
6161
port: process.env.PORT || 8080,
6262
proxy: {
6363
"/api": {
64-
target: "http://localhost:3000",
64+
target: "https://dev.coder.com",
6565
ws: true,
66+
secure: false,
6667
},
6768
},
6869
static: ["./static"],

0 commit comments

Comments
 (0)