Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 79442ef

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add icons to page header
1 parent 3091bea commit 79442ef

File tree

9 files changed

+58
-10
lines changed

9 files changed

+58
-10
lines changed

‎site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import EyeIcon from "@material-ui/icons/VisibilityOutlined"
1414
import PlusIcon from "@material-ui/icons/AddOutlined"
1515
import { AlertBanner } from "components/AlertBanner/AlertBanner"
1616
import { useTranslation } from "react-i18next"
17+
import { Stack } from "components/Stack/Stack"
1718

1819
export interface StarterTemplatePageViewProps {
1920
context: StarterTemplateContext
@@ -56,8 +57,17 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
5657
</>
5758
}
5859
>
59-
<PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
60-
<PageHeaderSubtitle>{starterTemplate.description}</PageHeaderSubtitle>
60+
<Stack direction="row" spacing={3} alignItems="center">
61+
<div className={styles.icon}>
62+
<img src={starterTemplate.icon} alt="" />
63+
</div>
64+
<div>
65+
<PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
66+
<PageHeaderSubtitle condensed>
67+
{starterTemplate.description}
68+
</PageHeaderSubtitle>
69+
</div>
70+
</Stack>
6171
</PageHeader>
6272

6373
<div className={styles.markdownSection} id="readme">
@@ -71,6 +81,18 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
7181

7282
export const useStyles = makeStyles((theme) => {
7383
return {
84+
icon: {
85+
height: theme.spacing(6),
86+
width: theme.spacing(6),
87+
display: "flex",
88+
alignItems: "center",
89+
justifyContent: "center",
90+
91+
"& img": {
92+
width: "100%",
93+
},
94+
},
95+
7496
markdownSection: {
7597
background: theme.palette.background.paper,
7698
border: `1px solid ${theme.palette.divider}`,

‎site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,15 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
4242
{context.starterTemplates &&
4343
context.starterTemplates.map((example) => (
4444
<Link to={example.id} className={styles.template} key={example.id}>
45-
<span className={styles.templateName}>{example.name}</span>
46-
<span className={styles.templateDescription}>
47-
{example.description}
48-
</span>
45+
<div className={styles.templateIcon}>
46+
<img src={example.icon} alt="" />
47+
</div>
48+
<div className={styles.templateInfo}>
49+
<span className={styles.templateName}>{example.name}</span>
50+
<span className={styles.templateDescription}>
51+
{example.description}
52+
</span>
53+
</div>
4954
</Link>
5055
))}
5156
</div>
@@ -61,21 +66,38 @@ const useStyles = makeStyles((theme) => ({
6166
},
6267

6368
template: {
64-
padding: theme.spacing(2),
6569
border: `1px solid ${theme.palette.divider}`,
6670
borderRadius: theme.shape.borderRadius,
6771
background: theme.palette.background.paper,
68-
display: "flex",
69-
flexDirection: "column",
70-
gap: theme.spacing(0.5),
7172
textDecoration: "none",
7273
color: "inherit",
74+
display: "flex",
75+
alignItems: "center",
7376

7477
"&:hover": {
7578
backgroundColor: theme.palette.background.paperLight,
7679
},
7780
},
7881

82+
templateIcon: {
83+
width: theme.spacing(12),
84+
height: theme.spacing(12),
85+
display: "flex",
86+
alignItems: "center",
87+
justifyContent: "center",
88+
89+
"& img": {
90+
height: theme.spacing(4),
91+
},
92+
},
93+
94+
templateInfo: {
95+
padding: theme.spacing(2, 2, 2, 0),
96+
display: "flex",
97+
flexDirection: "column",
98+
gap: theme.spacing(0.5),
99+
},
100+
79101
templateName: {
80102
fontSize: theme.spacing(2),
81103
},

‎site/src/testHelpers/entities.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1078,6 +1078,8 @@ export const MockTemplateExample: TypesGen.TemplateExample = {
10781078
description: "Get started with Linux development on AWS ECS.",
10791079
markdown:
10801080
"\n# aws-ecs\n\nThis is a sample template for running a Coder workspace on ECS. It assumes there\nis a pre-existing ECS cluster with EC2-based compute to host the workspace.\n\n## Architecture\n\nThis workspace is built using the following AWS resources:\n\n- Task definition - the container definition, includes the image, command, volume(s)\n- ECS service - manages the task definition\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n",
1081+
icon: "/icon/aws.png",
1082+
tags: ["aws", "cloud"],
10811083
}
10821084

10831085
export const MockTemplateExample2: TypesGen.TemplateExample = {
@@ -1087,4 +1089,6 @@ export const MockTemplateExample2: TypesGen.TemplateExample = {
10871089
description: "Get started with Linux development on AWS EC2.",
10881090
markdown:
10891091
'\n# aws-linux\n\nTo get started, run `coder templates init`. When prompted, select this template.\nFollow the on-screen instructions to proceed.\n\n## Authentication\n\nThis template assumes that coderd is run in an environment that is authenticated\nwith AWS. For example, run `aws configure import` to import credentials on the\nsystem and user running coderd. For other ways to authenticate [consult the\nTerraform docs](https://registry.terraform.io/providers/hashicorp/aws/latest/docs#authentication-and-configuration).\n\n## Required permissions / policy\n\nThe following sample policy allows Coder to create EC2 instances and modify\ninstances provisioned by Coder:\n\n```json\n{\n "Version": "2012-10-17",\n "Statement": [\n {\n "Sid": "VisualEditor0",\n "Effect": "Allow",\n "Action": [\n "ec2:GetDefaultCreditSpecification",\n "ec2:DescribeIamInstanceProfileAssociations",\n "ec2:DescribeTags",\n "ec2:CreateTags",\n "ec2:RunInstances",\n "ec2:DescribeInstanceCreditSpecifications",\n "ec2:DescribeImages",\n "ec2:ModifyDefaultCreditSpecification",\n "ec2:DescribeVolumes"\n ],\n "Resource": "*"\n },\n {\n "Sid": "CoderResources",\n "Effect": "Allow",\n "Action": [\n "ec2:DescribeInstances",\n "ec2:DescribeInstanceAttribute",\n "ec2:UnmonitorInstances",\n "ec2:TerminateInstances",\n "ec2:StartInstances",\n "ec2:StopInstances",\n "ec2:DeleteTags",\n "ec2:MonitorInstances",\n "ec2:CreateTags",\n "ec2:RunInstances",\n "ec2:ModifyInstanceAttribute",\n "ec2:ModifyInstanceCreditSpecification"\n ],\n "Resource": "arn:aws:ec2:*:*:instance/*",\n "Condition": {\n "StringEquals": {\n "aws:ResourceTag/Coder_Provisioned": "true"\n }\n }\n }\n ]\n}\n```\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n',
1092+
icon: "/icon/aws.png",
1093+
tags: ["aws", "cloud"],
10901094
}

‎site/static/icon/aws.png

2.4 KB
Loading

‎site/static/icon/azure.png

1.35 KB
Loading

‎site/static/icon/do.png

977 Bytes
Loading

‎site/static/icon/docker.png

3.29 KB
Loading

‎site/static/icon/gcp.png

2.17 KB
Loading

‎site/static/icon/k8s.png

2.76 KB
Loading

0 commit comments

Comments
 (0)