feat(auth): improve layout/design + add TextInput component@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664731417049,
+ "_generatedAtUnix": 1664737824064,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -74,11 +74,11 @@
"pathSource": "./app/views/InternalErrorView.tsx"
},
"LoginView": {
- "hash": "b1c922a3c40f04d6420377c083cfe04ac3a260aa",
+ "hash": "86965d3c632c5b2b6f3ef5bbcab2ad73adea2de1",
"pathSource": "./app/views/auth/LoginView.tsx"
},
"RegisterView": {
- "hash": "c325f32d6a3fecc69185adb82c5b2e5473b5b4f2",
+ "hash": "9ef9cd8f4c0e8402994277cf3d7191e3db765e6d",
"pathSource": "./app/views/auth/RegisterView.tsx"
},
"OrganizationDetailsView": {
@@ -90,7 +90,7 @@
"pathSource": "./app/views/repository/RepositoryBrowserView.tsx"
},
"RepositoryCommitsLogView": {
- "hash": "c65c95399c1f2ace58e861d55c191ab639084106",
+ "hash": "ee94df9b3d51904e124e61efbc8ef68b2ed51318",
"pathSource": "./app/views/repository/RepositoryCommitsLogView.tsx"
},
"RepositoryCompareView": {
@@ -102,7 +102,7 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "86c07eabd5673fcc81db11f1635092e961216c87",
+ "hash": "06e76c790f8b3c62a7659dc14a9b1501c5c68327",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
@@ -8,8 +8,6 @@ import { NamedColors } from "../utils/style";
interface PageHeaderProps extends CommonProps {}
-const SIDE_MENU_WIDTH = 320;
-
export const PageHeader: VFC<PageHeaderProps & WithThemeSchemeProp> = ({
commonProps,
themeScheme,
@@ -105,9 +103,6 @@ const StyledPageHeader = styled.header<WithThemeSchemeProp>`
`;
const StyledLogoArea = styled.div<WithThemeSchemeProp>`
- max-width: ${SIDE_MENU_WIDTH}px;
- width: 100%;
-
& > a {
display: flex;
flex-flow: row nowrap;
@@ -0,0 +1,30 @@
+// 3rd-party
+import styled, { css } from "styled-components";
+// app
+import type { WithThemeSchemeProp } from "../types";
+import { NamedColors } from "../utils/style";
+
+export const TextInput = styled.input<WithThemeSchemeProp>`
+ width: 100%;
+ height: 40px;
+
+ padding: 0 12px;
+
+ appearance: none;
+ border-radius: 8px;
+ font-size: 16px;
+
+ ${({ themeScheme }) => css`
+ background-color: ${NamedColors.INPUT[themeScheme]};
+ border: 1px solid ${NamedColors.BORDER_INPUT[themeScheme]};
+ color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
+ `};
+
+ &:focus,
+ &:focus-within {
+ ${({ themeScheme }) => css`
+ border-color: ${NamedColors.TEXT_LINK_HOVER[themeScheme]};
+ color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
+ `};
+ }
+`;
@@ -8,3 +8,4 @@ export { MarkdownToJsx } from "./MarkdownToJsx";
export { PageHeader } from "./PageHeader";
export { PageWrapper } from "./PageWrapper";
export { TextEllipsis } from "./TextEllipsis.styled";
+export { TextInput } from "./TextInput.styled";
@@ -14,10 +14,14 @@ const Colors = {
GRAY_DARK_04: "#222222",
GRAY_DARK_05: "#171717",
GRAY_DARK_06: "#B6B6B6",
+ WHITE_ALPHA_50: "rgba(255, 255, 255, 0.5)",
WHITE_01: "#FFFFFF",
+ BLACK_ALPHA_50: "rgba(0, 0, 0, 0.5)",
BLACK_01: "#111111",
+ BLACK_LIGHTER_01: "rgb(34, 34, 34)",
PURPLE_01: "#23014D",
CYAN_01: "#1B8F97",
+ RED_01: "red",
};
export default Colors;
@@ -13,6 +13,14 @@ const NamedColors = {
dark: Colors.GRAY_LIGHT_04,
light: Colors.GRAY_LIGHT_02,
},
+ BORDER_INPUT: {
+ dark: Colors.WHITE_ALPHA_50,
+ light: Colors.BLACK_ALPHA_50,
+ },
+ BORDER_INPUT_FOCUS: {
+ dark: Colors.RED_01,
+ light: Colors.RED_01,
+ },
BRAND_LINE: {
light: Colors.PRIMARY_01,
dark: Colors.PRIMARY_01,
@@ -29,6 +37,10 @@ const NamedColors = {
light: Colors.WHITE_01,
dark: Colors.GRAY_DARK_05,
},
+ INPUT: {
+ light: Colors.WHITE_01,
+ dark: Colors.BLACK_LIGHTER_01,
+ },
TEXT_DEFAULT: {
light: Colors.BLACK_01,
dark: Colors.WHITE_01,
@@ -41,6 +53,10 @@ const NamedColors = {
light: Colors.CYAN_01,
dark: Colors.CYAN_01,
},
+ TEXT_LINK_HOVER: {
+ light: Colors.GRAY_DARK_03,
+ dark: Colors.GRAY_LIGHT_03,
+ },
};
export default NamedColors;
@@ -2,7 +2,7 @@ import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
-import { Button, Layout, PageWrapper } from "../../components";
+import { Button, Card, Layout, PageWrapper, TextInput } from "../../components";
export interface LoginViewProps extends CommonProps {
errorMessage?: null | string;
@@ -19,36 +19,64 @@ const LoginView: ReactView<LoginViewProps> = ({
}) => {
return (
<Layout {...commonProps}>
- <PageWrapper>
+ <PageWrapper
+ style={{
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: `calc(100vh - 72px)`,
+ }}
+ >
{errorMessage && (
- <div className={"error_message"}>
- <p>{errorMessage}</p>
+ <div
+ style={{
+ width: "100%",
+ color: "red",
+ fontWeight: "bold",
+ textAlign: "center",
+ }}
+ >
+ <span>{errorMessage}</span>
</div>
)}
- <form action={`/auth/login`} method={"POST"}>
- {/* Email Address */}
- <div>
- <label htmlFor={"username"}>Email Address:</label>
- <input
- type={"text"}
- name={"email_address"}
- placeholder={"Enter your email address..."}
- defaultValue={initialValues?.emailAddress}
- />
- </div>
- {/* Password */}
- <div>
- <label htmlFor={"username"}>Password:</label>
- <input
- type={"password"}
- name={"password"}
- placeholder={"Enter your password..."}
- defaultValue={initialValues?.password}
- />
- </div>
- {/* Submit Button */}
- <Button type={"submit"}>Log me In!</Button>
- </form>
+ <Card
+ themeScheme={commonProps.themeScheme}
+ style={{ marginTop: errorMessage != null ? 16 : 0, padding: 16 }}
+ >
+ <form action={`/auth/login`} method={"POST"}>
+ {/* Email Address */}
+ <div style={{ marginTop: 0 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Email Address:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"email_address"}
+ placeholder={"Enter your email address..."}
+ defaultValue={initialValues?.emailAddress}
+ />
+ </div>
+ {/* Password */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Password:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"password"}
+ name={"password"}
+ placeholder={"Enter your password..."}
+ defaultValue={initialValues?.password}
+ />
+ </div>
+ {/* Submit Button */}
+ <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
+ Sign In
+ </Button>
+ </form>
+ </Card>
</PageWrapper>
</Layout>
);
William Nemenchafeat(auth): improve layout/design + add TextInput component946986c (parent 044354e)10/2/2022, 7:14:05 PMfeat(auth): improve layout/design + add TextInput component+ 199- 79app.manifest.json@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664731417049,
+ "_generatedAtUnix": 1664737824064,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
...@@ -74,11 +74,11 @@
"pathSource": "./app/views/InternalErrorView.tsx"
},
"LoginView": {
- "hash": "b1c922a3c40f04d6420377c083cfe04ac3a260aa",
+ "hash": "86965d3c632c5b2b6f3ef5bbcab2ad73adea2de1",
"pathSource": "./app/views/auth/LoginView.tsx"
},
"RegisterView": {
- "hash": "c325f32d6a3fecc69185adb82c5b2e5473b5b4f2",
+ "hash": "9ef9cd8f4c0e8402994277cf3d7191e3db765e6d",
"pathSource": "./app/views/auth/RegisterView.tsx"
},
"OrganizationDetailsView": {
...@@ -90,7 +90,7 @@
"pathSource": "./app/views/repository/RepositoryBrowserView.tsx"
},
"RepositoryCommitsLogView": {
- "hash": "c65c95399c1f2ace58e861d55c191ab639084106",
+ "hash": "ee94df9b3d51904e124e61efbc8ef68b2ed51318",
"pathSource": "./app/views/repository/RepositoryCommitsLogView.tsx"
},
"RepositoryCompareView": {
...@@ -102,7 +102,7 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "86c07eabd5673fcc81db11f1635092e961216c87",
+ "hash": "06e76c790f8b3c62a7659dc14a9b1501c5c68327",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
app/components/PageHeader.tsx@@ -8,8 +8,6 @@ import { NamedColors } from "../utils/style";
interface PageHeaderProps extends CommonProps {}
-const SIDE_MENU_WIDTH = 320;
-
export const PageHeader: VFC<PageHeaderProps & WithThemeSchemeProp> = ({
commonProps,
themeScheme,
...@@ -105,9 +103,6 @@ const StyledPageHeader = styled.header<WithThemeSchemeProp>`
`;
const StyledLogoArea = styled.div<WithThemeSchemeProp>`
- max-width: ${SIDE_MENU_WIDTH}px;
- width: 100%;
-
& > a {
display: flex;
flex-flow: row nowrap;
new fileapp/components/TextInput.styled.ts@@ -0,0 +1,30 @@
+// 3rd-party
+import styled, { css } from "styled-components";
+// app
+import type { WithThemeSchemeProp } from "../types";
+import { NamedColors } from "../utils/style";
+
+export const TextInput = styled.input<WithThemeSchemeProp>`
+ width: 100%;
+ height: 40px;
+
+ padding: 0 12px;
+
+ appearance: none;
+ border-radius: 8px;
+ font-size: 16px;
+
+ ${({ themeScheme }) => css`
+ background-color: ${NamedColors.INPUT[themeScheme]};
+ border: 1px solid ${NamedColors.BORDER_INPUT[themeScheme]};
+ color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
+ `};
+
+ &:focus,
+ &:focus-within {
+ ${({ themeScheme }) => css`
+ border-color: ${NamedColors.TEXT_LINK_HOVER[themeScheme]};
+ color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
+ `};
+ }
+`;
app/components/index.ts@@ -8,3 +8,4 @@ export { MarkdownToJsx } from "./MarkdownToJsx";
export { PageHeader } from "./PageHeader";
export { PageWrapper } from "./PageWrapper";
export { TextEllipsis } from "./TextEllipsis.styled";
+export { TextInput } from "./TextInput.styled";
app/utils/style/Colors.ts@@ -14,10 +14,14 @@ const Colors = {
GRAY_DARK_04: "#222222",
GRAY_DARK_05: "#171717",
GRAY_DARK_06: "#B6B6B6",
+ WHITE_ALPHA_50: "rgba(255, 255, 255, 0.5)",
WHITE_01: "#FFFFFF",
+ BLACK_ALPHA_50: "rgba(0, 0, 0, 0.5)",
BLACK_01: "#111111",
+ BLACK_LIGHTER_01: "rgb(34, 34, 34)",
PURPLE_01: "#23014D",
CYAN_01: "#1B8F97",
+ RED_01: "red",
};
export default Colors;
app/utils/style/NamedColors.ts@@ -13,6 +13,14 @@ const NamedColors = {
dark: Colors.GRAY_LIGHT_04,
light: Colors.GRAY_LIGHT_02,
},
+ BORDER_INPUT: {
+ dark: Colors.WHITE_ALPHA_50,
+ light: Colors.BLACK_ALPHA_50,
+ },
+ BORDER_INPUT_FOCUS: {
+ dark: Colors.RED_01,
+ light: Colors.RED_01,
+ },
BRAND_LINE: {
light: Colors.PRIMARY_01,
dark: Colors.PRIMARY_01,
...@@ -29,6 +37,10 @@ const NamedColors = {
light: Colors.WHITE_01,
dark: Colors.GRAY_DARK_05,
},
+ INPUT: {
+ light: Colors.WHITE_01,
+ dark: Colors.BLACK_LIGHTER_01,
+ },
TEXT_DEFAULT: {
light: Colors.BLACK_01,
dark: Colors.WHITE_01,
...@@ -41,6 +53,10 @@ const NamedColors = {
light: Colors.CYAN_01,
dark: Colors.CYAN_01,
},
+ TEXT_LINK_HOVER: {
+ light: Colors.GRAY_DARK_03,
+ dark: Colors.GRAY_LIGHT_03,
+ },
};
export default NamedColors;
app/views/auth/LoginView.tsx@@ -2,7 +2,7 @@ import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
-import { Button, Layout, PageWrapper } from "../../components";
+import { Button, Card, Layout, PageWrapper, TextInput } from "../../components";
export interface LoginViewProps extends CommonProps {
errorMessage?: null | string;
...@@ -19,36 +19,64 @@ const LoginView: ReactView<LoginViewProps> = ({
}) => {
return (
<Layout {...commonProps}>
- <PageWrapper>
+ <PageWrapper
+ style={{
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: `calc(100vh - 72px)`,
+ }}
+ >
{errorMessage && (
- <div className={"error_message"}>
- <p>{errorMessage}</p>
+ <div
+ style={{
+ width: "100%",
+ color: "red",
+ fontWeight: "bold",
+ textAlign: "center",
+ }}
+ >
+ <span>{errorMessage}</span>
</div>
)}
- <form action={`/auth/login`} method={"POST"}>
- {/* Email Address */}
- <div>
- <label htmlFor={"username"}>Email Address:</label>
- <input
- type={"text"}
- name={"email_address"}
- placeholder={"Enter your email address..."}
- defaultValue={initialValues?.emailAddress}
- />
- </div>
- {/* Password */}
- <div>
- <label htmlFor={"username"}>Password:</label>
- <input
- type={"password"}
- name={"password"}
- placeholder={"Enter your password..."}
- defaultValue={initialValues?.password}
- />
- </div>
- {/* Submit Button */}
- <Button type={"submit"}>Log me In!</Button>
- </form>
+ <Card
+ themeScheme={commonProps.themeScheme}
+ style={{ marginTop: errorMessage != null ? 16 : 0, padding: 16 }}
+ >
+ <form action={`/auth/login`} method={"POST"}>
+ {/* Email Address */}
+ <div style={{ marginTop: 0 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Email Address:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"email_address"}
+ placeholder={"Enter your email address..."}
+ defaultValue={initialValues?.emailAddress}
+ />
+ </div>
+ {/* Password */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Password:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"password"}
+ name={"password"}
+ placeholder={"Enter your password..."}
+ defaultValue={initialValues?.password}
+ />
+ </div>
+ {/* Submit Button */}
+ <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
+ Sign In
+ </Button>
+ </form>
+ </Card>
</PageWrapper>
</Layout>
);
app/views/auth/RegisterView.tsx@@ -2,7 +2,7 @@ import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
-import { Button, Layout, PageWrapper } from "../../components";
+import { Button, Card, Layout, PageWrapper, TextInput } from "../../components";
export interface RegisterViewProps extends CommonProps {
errorMessage?: null | string;
...@@ -20,46 +20,78 @@ const RegisterView: ReactView<RegisterViewProps> = ({
}) => {
return (
<Layout {...commonProps}>
- <PageWrapper>
+ <PageWrapper
+ style={{
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: `calc(100vh - 72px)`,
+ }}
+ >
{errorMessage && (
- <div className={"error_message"}>
- <p>{errorMessage}</p>
+ <div
+ style={{
+ width: "100%",
+ color: "red",
+ fontWeight: "bold",
+ textAlign: "center",
+ }}
+ >
+ <span>{errorMessage}</span>
</div>
)}
- <form action={`/auth/register`} method={"POST"}>
- {/* Email Address */}
- <div>
- <label htmlFor={"username"}>Email Address:</label>
- <input
- type={"text"}
- name={"email_address"}
- placeholder={"i.e. john.doe@provider.tld..."}
- defaultValue={initialValues?.emailAddress}
- />
- </div>
- {/* Username */}
- <div>
- <label htmlFor={"username"}>Username:</label>
- <input
- type={"text"}
- name={"username"}
- placeholder={"i.e. john.doe, jane.smith, etc..."}
- defaultValue={initialValues?.username}
- />
- </div>
- {/* Password */}
- <div>
- <label htmlFor={"username"}>Password:</label>
- <input
- type={"password"}
- name={"password"}
- placeholder={"Choose a great password..."}
- defaultValue={initialValues?.password}
- />
- </div>
- {/* Submit Button */}
- <Button type={"submit"}>Create my Account</Button>
- </form>
+ <Card
+ themeScheme={commonProps.themeScheme}
+ style={{ marginTop: errorMessage != null ? 16 : 0, padding: 16 }}
+ >
+ <form action={`/auth/register`} method={"POST"}>
+ {/* Email Address */}
+ <div>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Email Address:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"email_address"}
+ placeholder={"i.e. john.doe@provider.tld..."}
+ defaultValue={initialValues?.emailAddress}
+ />
+ </div>
+ {/* Username */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Username:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"username"}
+ placeholder={"i.e. john.doe, jane.smith, etc..."}
+ defaultValue={initialValues?.username}
+ />
+ </div>
+ {/* Password */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Password:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"password"}
+ name={"password"}
+ placeholder={"Choose a great password..."}
+ defaultValue={initialValues?.password}
+ />
+ </div>
+ {/* Submit Button */}
+ <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
+ Create my Account
+ </Button>
+ </form>
+ </Card>
</PageWrapper>
</Layout>
);
app/views/repository/RepositoryCommitsLogView.tsx@@ -37,7 +37,7 @@ const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
<IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
<RepositoryHero parentOrg={parentOrg} path={"Commits"} repo={repo} />
</IslandWrapper>
- <Grid.Col style={{ width: "100%", marginTop: 32 }}>
+ <Grid.Col style={{ width: "100%", marginTop: 0 }}>
{history.map((commit, idx) => (
<Card
key={commit.commit}
app/views/repository/RepositoryDetailsView.tsx@@ -122,7 +122,14 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Grid.Col fluid style={{ height: "unset !important" }}>
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
- style={{ width: "100%", padding: 8 }}
+ style={{
+ width: "100%",
+ padding: 8,
+ position: "sticky",
+ top: 80,
+ zIndex: 9000,
+ borderRadius: 8,
+ }}
themeScheme={commonProps.themeScheme}
>
<RepositoryCommitSummaryLine
...@@ -167,7 +174,14 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Grid.Col
flex={0.3}
nowrap
- style={{ minWidth: 320, width: "100%", maxWidth: 380 }}
+ style={{
+ minWidth: 320,
+ width: "100%",
+ maxWidth: 768,
+ position: "sticky",
+ top: 80,
+ zIndex: 9000,
+ }}
>
<Card
style={{ width: "100%" }}
@@ -2,7 +2,7 @@ import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// app
import type { CommonProps } from "../../types";
-import { Button, Layout, PageWrapper } from "../../components";
+import { Button, Card, Layout, PageWrapper, TextInput } from "../../components";
export interface RegisterViewProps extends CommonProps {
errorMessage?: null | string;
@@ -20,46 +20,78 @@ const RegisterView: ReactView<RegisterViewProps> = ({
}) => {
return (
<Layout {...commonProps}>
- <PageWrapper>
+ <PageWrapper
+ style={{
+ justifyContent: "center",
+ alignItems: "center",
+ minHeight: `calc(100vh - 72px)`,
+ }}
+ >
{errorMessage && (
- <div className={"error_message"}>
- <p>{errorMessage}</p>
+ <div
+ style={{
+ width: "100%",
+ color: "red",
+ fontWeight: "bold",
+ textAlign: "center",
+ }}
+ >
+ <span>{errorMessage}</span>
</div>
)}
- <form action={`/auth/register`} method={"POST"}>
- {/* Email Address */}
- <div>
- <label htmlFor={"username"}>Email Address:</label>
- <input
- type={"text"}
- name={"email_address"}
- placeholder={"i.e. john.doe@provider.tld..."}
- defaultValue={initialValues?.emailAddress}
- />
- </div>
- {/* Username */}
- <div>
- <label htmlFor={"username"}>Username:</label>
- <input
- type={"text"}
- name={"username"}
- placeholder={"i.e. john.doe, jane.smith, etc..."}
- defaultValue={initialValues?.username}
- />
- </div>
- {/* Password */}
- <div>
- <label htmlFor={"username"}>Password:</label>
- <input
- type={"password"}
- name={"password"}
- placeholder={"Choose a great password..."}
- defaultValue={initialValues?.password}
- />
- </div>
- {/* Submit Button */}
- <Button type={"submit"}>Create my Account</Button>
- </form>
+ <Card
+ themeScheme={commonProps.themeScheme}
+ style={{ marginTop: errorMessage != null ? 16 : 0, padding: 16 }}
+ >
+ <form action={`/auth/register`} method={"POST"}>
+ {/* Email Address */}
+ <div>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Email Address:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"email_address"}
+ placeholder={"i.e. john.doe@provider.tld..."}
+ defaultValue={initialValues?.emailAddress}
+ />
+ </div>
+ {/* Username */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Username:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"text"}
+ name={"username"}
+ placeholder={"i.e. john.doe, jane.smith, etc..."}
+ defaultValue={initialValues?.username}
+ />
+ </div>
+ {/* Password */}
+ <div style={{ marginTop: 16 }}>
+ <label htmlFor={"username"} style={{ fontWeight: "bold" }}>
+ Password:
+ </label>
+ <TextInput
+ style={{ marginTop: 8 }}
+ themeScheme={commonProps.themeScheme}
+ type={"password"}
+ name={"password"}
+ placeholder={"Choose a great password..."}
+ defaultValue={initialValues?.password}
+ />
+ </div>
+ {/* Submit Button */}
+ <Button type={"submit"} style={{ marginTop: 16, width: "100%" }}>
+ Create my Account
+ </Button>
+ </form>
+ </Card>
</PageWrapper>
</Layout>
);
@@ -37,7 +37,7 @@ const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
<IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
<RepositoryHero parentOrg={parentOrg} path={"Commits"} repo={repo} />
</IslandWrapper>
- <Grid.Col style={{ width: "100%", marginTop: 32 }}>
+ <Grid.Col style={{ width: "100%", marginTop: 0 }}>
{history.map((commit, idx) => (
<Card
key={commit.commit}
@@ -122,7 +122,14 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Grid.Col fluid style={{ height: "unset !important" }}>
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
- style={{ width: "100%", padding: 8 }}
+ style={{
+ width: "100%",
+ padding: 8,
+ position: "sticky",
+ top: 80,
+ zIndex: 9000,
+ borderRadius: 8,
+ }}
themeScheme={commonProps.themeScheme}
>
<RepositoryCommitSummaryLine
@@ -167,7 +174,14 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Grid.Col
flex={0.3}
nowrap
- style={{ minWidth: 320, width: "100%", maxWidth: 380 }}
+ style={{
+ minWidth: 320,
+ width: "100%",
+ maxWidth: 768,
+ position: "sticky",
+ top: 80,
+ zIndex: 9000,
+ }}
>
<Card
style={{ width: "100%" }}