ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button and theme colors changed

Browse Source
This commit is contained in:
Valtteri Karesto
2021-11-20 01:34:40 +02:00
parent 1a182858b4
commit 460412d3d7
12 changed files with 387 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/Button.tsx
View File

@@ -1,4 +1,9 @@
import { CSS } from "@stitches/react/types/css-util";
import { StyledComponent } from "@stitches/react/types/styled-component";
import React from "react";
import { styled } from "../stitches.config";
import Flex from "./Flex";
import Spinner from "./Spinner";
const Button = styled("button", {
// Reset
@@ -30,8 +35,9 @@ const Button = styled("button", {
backgroundColor: "red",
cursor: "pointer",
"&:disabled": {
opacity: 0.8,
opacity: 0.6,
pointerEvents: "none",
cursor: "not-allowed",
},
variants: {
size: {
@@ -56,27 +62,27 @@ const Button = styled("button", {
},
variant: {
default: {
backgroundColor: "$slate12",
boxShadow: "inset 0 0 0 1px $colors$slate12",
color: "$slate1",
backgroundColor: "$mauve12",
boxShadow: "inset 0 0 0 1px $colors$mauve12",
color: "$mauve1",
"@hover": {
"&:hover": {
backgroundColor: "$slate12",
boxShadow: "inset 0 0 0 1px $colors$slate12",
backgroundColor: "$mauve12",
boxShadow: "inset 0 0 0 1px $colors$mauve12",
},
},
"&:active": {
backgroundColor: "$slate10",
boxShadow: "inset 0 0 0 1px $colors$slate11",
backgroundColor: "$mauve10",
boxShadow: "inset 0 0 0 1px $colors$mauve11",
},
"&:focus": {
boxShadow:
"inset 0 0 0 1px $colors$slate12, 0 0 0 1px $colors$slate12",
"inset 0 0 0 1px $colors$mauve12, 0 0 0 1px $colors$mauve12",
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
{
backgroundColor: "$slate4",
boxShadow: "inset 0 0 0 1px $colors$slate8",
backgroundColor: "$mauve4",
boxShadow: "inset 0 0 0 1px $colors$mauve8",
},
},
primary: {
@@ -98,7 +104,7 @@ const Button = styled("button", {
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
{
backgroundColor: "$slate4",
backgroundColor: "$mauve4",
boxShadow: "inset 0 0 0 1px $colors$pink8",
},
},
@@ -117,15 +123,15 @@ const Button = styled("button", {
true: {
boxShadow: "none",
background: "transparent",
color: "$slate12",
color: "$mauve12",
"@hover": {
"&:hover": {
backgroundColor: "$slate6",
backgroundColor: "$mauve6",
boxShadow: "none",
},
},
"&:active": {
backgroundColor: "$slate8",
backgroundColor: "$mauve8",
boxShadow: "none",
},
"&:focus": {
@@ -133,19 +139,26 @@ const Button = styled("button", {
},
},
},
isLoading: {
true: {
"& .button-content": {
visibility: "hidden",
},
pointerEvents: "none",
},
},
},
compoundVariants: [
{
outline: true,
variant: "default",
css: {
background: "transparent",
color: "$slate12",
boxShadow: "inset 0 0 0 1px $colors$slate10",
color: "$mauve12",
boxShadow: "inset 0 0 0 1px $colors$mauve10",
"&:hover": {
color: "$slate12",
background: "$slate5",
color: "$mauve12",
background: "$mauve5",
},
},
},
@@ -154,10 +167,10 @@ const Button = styled("button", {
variant: "primary",
css: {
background: "transparent",
color: "$slate12",
color: "$mauve12",
"&:hover": {
color: "$slate12",
background: "$slate5",
color: "$mauve12",
background: "$mauve5",
},
},
},
@@ -168,4 +181,22 @@ const Button = styled("button", {
},
});
export default Button;
const CustomButton: React.FC<
React.ComponentProps<typeof Button> & { as?: string }
> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
// @ts-expect-error
<Button {...rest} ref={ref} as={as}>
<Flex
as="span"
css={{ gap: "$2", alignItems: "center" }}
className="button-content"
>
{children}
</Flex>
{rest.isLoading && <Spinner css={{ position: "absolute" }} />}
</Button>
));
CustomButton.displayName = "CustomButton";
export default CustomButton;

28
components/Dialog.tsx
View File

@@ -29,8 +29,8 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
const StyledContent = styled(DialogPrimitive.Content, {
zIndex: 1000,
backgroundColor: "$slate2",
color: "$slate12",
backgroundColor: "$mauve2",
color: "$mauve12",
borderRadius: "$md",
boxShadow:
"0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
@@ -47,7 +47,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
},
"&:focus": { outline: "none" },
".dark &": {
backgroundColor: "$slate5",
backgroundColor: "$mauve5",
boxShadow:
"0px 10px 38px 0px rgba(22, 23, 24, 0.85), 0px 10px 20px 0px rgba(22, 23, 24, 0.6)",
},
@@ -65,13 +65,13 @@ const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
const StyledTitle = styled(DialogPrimitive.Title, {
margin: 0,
fontWeight: 500,
color: "$slate12",
color: "$mauve12",
fontSize: 17,
});
const StyledDescription = styled(DialogPrimitive.Description, {
margin: "10px 0 20px",
color: "$slate11",
color: "$mauve11",
fontSize: 15,
lineHeight: 1.5,
});
@@ -83,21 +83,3 @@ export const DialogContent = Content;
export const DialogTitle = StyledTitle;
export const DialogDescription = StyledDescription;
export const DialogClose = DialogPrimitive.Close;
const Input = styled("input", {
all: "unset",
width: "100%",
flex: "1",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 4,
padding: "0 10px",
fontSize: 15,
lineHeight: 1,
color: violet.violet11,
boxShadow: `0 0 0 1px ${violet.violet7}`,
height: 35,
"&:focus": { boxShadow: `0 0 0 2px ${violet.violet8}` },
});

15
components/DropdownMenu.tsx
View File

@@ -2,7 +2,6 @@ import { keyframes } from "@stitches/react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { styled } from "../stitches.config";
import { blackA, slateDark } from "@radix-ui/colors";
const slideUpAndFade = keyframes({
"0%": { opacity: 0, transform: "translateY(2px)" },
@@ -26,7 +25,7 @@ const slideLeftAndFade = keyframes({
const StyledContent = styled(DropdownMenuPrimitive.Content, {
minWidth: 220,
backgroundColor: "$slate2",
backgroundColor: "$mauve2",
borderRadius: 6,
padding: 5,
boxShadow:
@@ -43,7 +42,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
},
},
".dark &": {
backgroundColor: "$slate5",
backgroundColor: "$mauve5",
boxShadow:
"0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
},
@@ -53,7 +52,7 @@ const itemStyles = {
all: "unset",
fontSize: 13,
lineHeight: 1,
color: "$slate12",
color: "$mauve12",
borderRadius: 3,
display: "flex",
alignItems: "center",
@@ -65,7 +64,7 @@ const itemStyles = {
gap: "$2",
"&[data-disabled]": {
color: "$slate9",
color: "$mauve9",
pointerEvents: "none",
},
@@ -94,12 +93,12 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
paddingLeft: 25,
fontSize: 12,
lineHeight: "25px",
color: "$slate11",
color: "$mauve11",
});
const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
height: 1,
backgroundColor: "$slate7",
backgroundColor: "$mauve7",
margin: 5,
});
@@ -113,7 +112,7 @@ const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
});
const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
fill: "$slate2",
fill: "$mauve2",
});
// Exports

40
components/EditorNavigation.tsx
View File

@@ -19,6 +19,7 @@ import Stack from "./Stack";
import { useSnapshot } from "valtio";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import Input from "./Input";
const EditorNavigation = () => {
const snap = useSnapshot(state);
@@ -40,7 +41,7 @@ const EditorNavigation = () => {
size="sm"
outline={snap.active !== index}
onClick={() => (state.active = index)}
key={file.name}
key={file.name + index}
css={{
"&:hover": {
span: {
@@ -54,13 +55,28 @@ const EditorNavigation = () => {
as="span"
css={{
display: "flex",
p: "1px",
p: "2px",
borderRadius: "$full",
mr: "-4px",
"&:hover": {
// boxSizing: "0px 0px 1px",
backgroundColor: "$mauve2",
color: "$mauve12",
},
}}
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.stopPropagation();
// Remove file from state
state.files.splice(index, 1);
// Change active file state
// If deleted file is behind active tab
// we keep the current state otherwise
// select previous file on the list
state.active =
index > snap.active ? snap.active : snap.active - 1;
}}
onClick={() => state.files.splice(index, 1)}
>
<X size="13px" />
<X size="9px" weight="bold" />
</Box>
</Button>
))}
@@ -79,10 +95,8 @@ const EditorNavigation = () => {
<DialogContent>
<DialogTitle>Create new file</DialogTitle>
<DialogDescription>
<span>
Create empty C file or select one of the existing ones
</span>
<input
<label>Filename</label>
<Input
value={filename}
onChange={(e) => setFilename(e.target.value)}
/>
@@ -120,7 +134,7 @@ const EditorNavigation = () => {
<Flex
css={{
py: "$3",
backgroundColor: "$slate3",
backgroundColor: "$mauve3",
zIndex: 1,
}}
>
@@ -131,7 +145,7 @@ const EditorNavigation = () => {
marginLeft: "auto",
flexShrink: 0,
gap: "$0",
border: "1px solid $slate10",
border: "1px solid $mauve10",
borderRadius: "$sm",
zIndex: 9,
position: "relative",
@@ -185,8 +199,10 @@ const EditorNavigation = () => {
<DialogContent>
<DialogTitle>Editor settings</DialogTitle>
<DialogDescription>
<span>You can edit your editor settings here</span>
<input
<label>Tab size</label>
<Input
type="number"
min="1"
value={editorSettings.tabSize}
onChange={(e) =>
setEditorSettings((curr) => ({

8
components/Footer.tsx
View File

@@ -12,11 +12,11 @@ const Footer = () => {
as="footer"
css={{
display: "flex",
borderTop: "1px solid $slate6",
background: "$slate1",
borderTop: "1px solid $mauve6",
background: "$mauve1",
}}
>
<Container css={{ py: "$4", flexShrink: 1 }}>
<Container css={{ py: "$3", flexShrink: 1 }}>
<Box
as="pre"
css={{
@@ -35,7 +35,7 @@ const Footer = () => {
}}
>
{snap.logs.map((log, index) => (
<Box key={log.type + index}>
<Box as="span" key={log.type + index}>
<LogText capitalize variant={log.type}>
{log.type}:{" "}
</LogText>

56
components/HooksEditor.tsx
View File

@@ -2,32 +2,23 @@ import React, { useEffect, useRef } from "react";
import { useSnapshot, ref } from "valtio";
import Editor from "@monaco-editor/react";
import type monaco from "monaco-editor";
import { Play } from "phosphor-react";
import { ArrowBendLeftUp, Play } from "phosphor-react";
import { useTheme } from "next-themes";
import Box from "./Box";
import Button from "./Button";
import Container from "./Container";
import dark from "../theme/editor/amy.json";
import light from "../theme/editor/xcode_default.json";
import { compileCode, saveFile, state } from "../state";
import EditorNavigation from "./EditorNavigation";
import Spinner from "./Spinner";
import Text from "./Text";
const HooksEditor = () => {
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
const snap = useSnapshot(state);
const { theme } = useTheme();
// useEffect(() => {
// if (snap.editorCtx) {
// snap.editorCtx.getModels().forEach((model) => {
// // console.log(model.id,);
// snap.editorCtx?.createModel(model.getValue(), "c", model.uri);
// });
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, []);
console.log("reinit");
return (
<Box
css={{
@@ -36,16 +27,17 @@ const HooksEditor = () => {
display: "flex",
position: "relative",
flexDirection: "column",
backgroundColor: "$slate3",
backgroundColor: "$mauve3",
width: "100%",
}}
>
<EditorNavigation />
{snap.files.length > 0 ? (
<Editor
keepCurrentModel
// defaultLanguage={snap.files?.[snap.active]?.language}
defaultLanguage={snap.files?.[snap.active]?.language}
path={snap.files?.[snap.active]?.name}
// defaultValue={snap.files?.[snap.active]?.content}
defaultValue={snap.files?.[snap.active]?.content}
beforeMount={(monaco) => {
if (!state.editorCtx) {
state.editorCtx = ref(monaco.editor);
@@ -73,11 +65,42 @@ const HooksEditor = () => {
}}
theme={theme === "dark" ? "dark" : "light"}
/>
) : (
<Container>
<Box
css={{
flexDirection: "row",
width: "$spaces$wide",
gap: "$3",
display: "inline-flex",
}}
>
<Box css={{ display: "inline-flex", pl: "35px" }}>
<ArrowBendLeftUp size={30} />
</Box>
<Box
css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
>
<Text
css={{
fontSize: "14px",
maxWidth: "220px",
fontFamily: "$monospace",
}}
>
Click the link above to create a your file (until we get the
fancy modal, where you can select example files 😊)
</Text>
</Box>
</Box>
</Container>
)}
<Button
variant="primary"
uppercase
disabled={!snap.files.length}
isLoading={snap.compiling}
onClick={() => compileCode(snap.active)}
disabled={snap.compiling}
css={{
position: "absolute",
bottom: "$4",
@@ -89,7 +112,6 @@ const HooksEditor = () => {
>
<Play weight="bold" size="16px" />
Compile to Wasm
{snap.compiling && <Spinner />}
</Button>
</Box>
);

139
components/Input.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { styled } from "../stitches.config";
export const Input = styled("input", {
// Reset
appearance: "none",
borderWidth: "0",
boxSizing: "border-box",
fontFamily: "inherit",
outline: "none",
width: "100%",
flex: "1",
backgroundColor: "$mauve4",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "$sm",
px: "$2",
fontSize: "$md",
lineHeight: 1,
color: "$mauve12",
boxShadow: `0 0 0 1px $colors$mauve8`,
height: 35,
WebkitTapHighlightColor: "rgba(0,0,0,0)",
"&::before": {
boxSizing: "border-box",
},
"&::after": {
boxSizing: "border-box",
},
fontVariantNumeric: "tabular-nums",
"&:-webkit-autofill": {
boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
},
"&:-webkit-autofill::first-line": {
fontFamily: "$untitled",
color: "$mauve12",
},
"&:focus": {
boxShadow: `0 0 0 1px $colors$mauve10`,
"&:-webkit-autofill": {
boxShadow: `0 0 0 1px $colors$mauve10`,
},
},
"&::placeholder": {
color: "$mauve9",
},
"&:disabled": {
pointerEvents: "none",
backgroundColor: "$mauve2",
color: "$mauve8",
cursor: "not-allowed",
"&::placeholder": {
color: "$mauve7",
},
},
"&:read-only": {
backgroundColor: "$mauve2",
"&:focus": {
boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
},
},
variants: {
size: {
md: {
height: "$8",
fontSize: "$1",
lineHeight: "$sizes$5",
"&:-webkit-autofill::first-line": {
fontSize: "$1",
},
},
lg: {
height: "$12",
fontSize: "$2",
lineHeight: "$sizes$6",
"&:-webkit-autofill::first-line": {
fontSize: "$3",
},
},
},
variant: {
ghost: {
boxShadow: "none",
backgroundColor: "transparent",
"@hover": {
"&:hover": {
boxShadow: "inset 0 0 0 1px $colors$mauve7",
},
},
"&:focus": {
backgroundColor: "$loContrast",
boxShadow: `0 0 0 1px $colors$mauve10`,
},
"&:disabled": {
backgroundColor: "transparent",
},
"&:read-only": {
backgroundColor: "transparent",
},
},
},
state: {
invalid: {
boxShadow: "inset 0 0 0 1px $colors$red7",
"&:focus": {
boxShadow:
"inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
},
},
valid: {
boxShadow: "inset 0 0 0 1px $colors$green7",
"&:focus": {
boxShadow:
"inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
},
},
},
cursor: {
default: {
cursor: "default",
"&:focus": {
cursor: "text",
},
},
text: {
cursor: "text",
},
},
},
defaultVariants: {
size: "md",
},
});
export default Input;

54
components/Navigation.tsx
View File

@@ -22,9 +22,9 @@ import {
import Stack from "./Stack";
import Logo from "./Logo";
import Button from "./Button";
import Flex from "./Flex";
import Container from "./Container";
import Box from "./Box";
import Flex from "./Flex";
import ThemeChanger from "./ThemeChanger";
import { useRouter } from "next/router";
@@ -37,7 +37,7 @@ const Navigation = () => {
css={{
display: "flex",
height: "60px",
borderBottom: "1px solid $slate6",
borderBottom: "1px solid $mauve6",
position: "relative",
zIndex: 2003,
}}
@@ -52,12 +52,32 @@ const Navigation = () => {
<Link href="/" passHref>
<Box
as="a"
css={{ display: "flex", alignItems: "center", color: "$textColor" }}
css={{
display: "flex",
alignItems: "center",
color: "$textColor",
}}
>
<Logo width="30px" height="30px" />
</Box>
</Link>
<Stack css={{ ml: "$4", gap: "$3" }}>
<Flex
css={{
flex: 1,
flexWrap: "nowrap",
marginLeft: "$3",
overflowX: "scroll",
}}
>
<Stack
css={{
ml: "$4",
gap: "$3",
flexWrap: "nowrap",
alignItems: "center",
pr: "$3",
}}
>
<Link href="/develop" passHref shallow>
<Button
as="a"
@@ -85,9 +105,20 @@ const Navigation = () => {
Test
</Button>
</Link>
</Stack>
<Stack css={{ color: "text", ml: "auto" }}>
<ThemeChanger />
</Stack>
</Flex>
<Stack
css={{
color: "text",
ml: "auto",
flexWrap: "nowrap",
marginLeft: "$3",
"@sm": {
marginLeft: "auto",
},
}}
>
{status === "authenticated" && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -135,12 +166,15 @@ const Navigation = () => {
</DropdownMenuContent>
</DropdownMenu>
)}
{status === "unauthenticated" && (
<Button outline onClick={() => signIn("github")}>
<GithubLogo size="16px" /> Github Login
{status !== "authenticated" && (
<Button
isLoading={status === "loading"}
outline
onClick={() => signIn("github")}
>
<GithubLogo size="16px" /> GitHub Login
</Button>
)}
{status === "loading" && "loading"}
{/* <Box
css={{
border: "1px solid",

5
components/Spinner.tsx
View File

@@ -3,11 +3,12 @@ import { styled, keyframes } from "../stitches.config";
const rotate = keyframes({
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
"100%": { transform: "rotate(-360deg)" },
});
const Spinner = styled(SpinnerIcon, {
animation: `${rotate} 150ms cubic-bezier(0.16, 1, 0.3, 1) infinite`,
animation: `${rotate} 150ms linear infinite`,
fontSize: "16px",
});
export default Spinner;

7
pages/develop/index.tsx
View File

@@ -2,12 +2,14 @@ import type { NextPage } from "next";
import Head from "next/head";
import dynamic from "next/dynamic";
import Footer from "../../components/Footer";
const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
ssr: false,
});
const Footer = dynamic(() => import("../../components/Footer"), {
ssr: false,
});
const Home: NextPage = () => {
return (
<>
@@ -17,7 +19,6 @@ const Home: NextPage = () => {
<main style={{ display: "flex", flex: 1 }}>
<HooksEditor />
</main>
<Footer />
</>
);

2
theme/editor/amy.json
View File

@@ -182,7 +182,7 @@
],
"colors": {
"editor.foreground": "#D0D0FF",
"editor.background": "#202425",
"editor.background": "#232326",
"editor.selectionBackground": "#ffffff30",
"editor.lineHighlightBackground": "#ffffff20",
"editorCursor.foreground": "#7070FF",

2
theme/editor/xcode_default.json
View File

@@ -89,7 +89,7 @@
],
"colors": {
"editor.foreground": "#000000",
"editor.background": "#f1f3f5",
"editor.background": "#f4f2f4",
"editor.selectionBackground": "#B5D5FF",
"editor.lineHighlightBackground": "#00000012",
"editorCursor.foreground": "#000000",