Skip to content

Update theme selection components #10111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 19, 2022
Merged

Update theme selection components #10111

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d977494
Update theme selection component
gtsiolis May 18, 2022
b82ec66
Update illustrations for theme options
gtsiolis May 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 28 additions & 27 deletions components/dashboard/src/settings/Preferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { useContext, useState } from "react";
import { PageWithSubMenu } from "../components/PageWithSubMenu";
import PillLabel from "../components/PillLabel";
import SelectableCard from "../components/SelectableCard";
import SelectableCardSolid from "../components/SelectableCardSolid";
import { getGitpodService } from "../service/service";
import { ThemeContext } from "../theme-context";
import { UserContext } from "../user-context";
Expand Down Expand Up @@ -64,55 +64,56 @@ export default function Preferences() {
<h3 className="mt-12">Theme</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
<div className="mt-4 space-x-4 flex">
<SelectableCard
<SelectableCardSolid
className="w-36 h-32"
title="Light"
selected={theme === "light"}
onClick={() => actuallySetTheme("light")}
>
<div className="flex-grow flex justify-center items-end">
<svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64">
<rect width="68" height="40" x="40" fill="#C4C4C4" rx="8" />
<rect width="32" height="16" fill="#C4C4C4" rx="8" />
<rect width="32" height="16" y="24" fill="#C4C4C4" rx="8" />
<rect width="32" height="16" y="48" fill="#C4C4C4" rx="8" />
<div className="flex-grow flex items-end p-1">
<svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
fill="#D6D3D1"
/>
</svg>
</div>
</SelectableCard>
<SelectableCard
</SelectableCardSolid>
<SelectableCardSolid
className="w-36 h-32"
title="Dark"
selected={theme === "dark"}
onClick={() => actuallySetTheme("dark")}
>
<div className="flex-grow flex justify-center items-end">
<svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64">
<rect width="68" height="40" x="40" fill="#737373" rx="8" />
<rect width="32" height="16" fill="#737373" rx="8" />
<rect width="32" height="16" y="24" fill="#737373" rx="8" />
<rect width="32" height="16" y="48" fill="#737373" rx="8" />
<div className="flex-grow flex items-end p-1">
<svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
fill="#78716C"
/>
</svg>
</div>
</SelectableCard>
<SelectableCard
</SelectableCardSolid>
<SelectableCardSolid
className="w-36 h-32"
title="System"
selected={theme === "system"}
onClick={() => actuallySetTheme("system")}
>
<div className="flex-grow flex justify-center items-end">
<svg className="h-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 64">
<rect width="68" height="40" x="40" fill="#C4C4C4" rx="8" />
<div className="flex-grow flex items-end p-1">
<svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
fill="#D9D9D9"
/>
<path
fill="#737373"
d="M74.111 3.412A8 8 0 0180.665 0H100a8 8 0 018 8v24a8 8 0 01-8 8H48.5L74.111 3.412z"
d="M84 0h22a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H68L84 0ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z"
fill="#78716C"
/>
<rect width="32" height="16" fill="#C4C4C4" rx="8" />
<rect width="32" height="16" y="24" fill="#737373" rx="8" />
<rect width="32" height="16" y="48" fill="#C4C4C4" rx="8" />
<path d="M0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z" fill="#D9D9D9" />
</svg>
</div>
</SelectableCard>
</SelectableCardSolid>
</div>

<h3 className="mt-12">
Expand Down