Skip to content

Commit b8818e1

Browse files
GameonnGameonn
committed
Merge branch 'refactor-fix' of https://github.com/Gameonn/react-button-component into refactor-fix
2 parents 0fc26b5 + 1eec4cd commit b8818e1

File tree

5 files changed

+187
-4
lines changed

5 files changed

+187
-4
lines changed

‎README.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
<!-- Please update value in the {} -->
2-
31
<h1 align="center">Button Component</h1>
42

53
<div align="center">
6-
Solution for a challenge from <a href="http://devchallenges.io" target="_blank">Devchallenges.io</a>.
4+
Solution for a challenge from <a href="http://devchallenges.io" target="_blank"> Devchallenges.io </a>.
75
</div>
86

97
<div align="center">
@@ -27,7 +25,8 @@
2725
## Table of Contents
2826

2927
- [Overview](#overview)
30-
- [Built With](#built-with)
28+
- [Preview](#preview)
29+
- [Built With](#built-with)
3130
- [Features](#features)
3231
- [How to use](#how-to-use)
3332
- [Contact](#contact)
@@ -48,12 +47,17 @@ Try to tell visitors a story about your project by answering:
4847
- Your wisdom? :)
4948
- Awesome challenge for implementing basics of react
5049

50+
### Preview
51+
<img src="https://user-images.githubusercontent.com/6601996/184472147-e3797312-25a7-43c7-8600-ea545a78bd3e.png" />
52+
53+
5154
### Built With
5255

5356
<!-- This section should list any major frameworks that you built your project using. Here are a few examples.-->
5457

5558
- [React](https://reactjs.org/)
5659
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
60+
- Material Icons
5761

5862
## Features
5963

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
12
import React from "react";
23
import { Route, Routes, Navigate } from "react-router-dom";
4+
35
import Page from "./components/Page";
46
import "./App.css";
57

‎src/components/Button.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import styles from "./Button.module.css";
2+
3+
const Button = ({
4+
variant,
5+
text,
6+
disableShadow,
7+
states,
8+
disabled,
9+
size,
10+
color,
11+
startIcon,
12+
endIcon,
13+
children
14+
}) => {
15+
return (
16+
<button
17+
className={`
18+
${styles.button}
19+
${color ? styles[color] : styles["default"]}
20+
${styles[variant]}
21+
${disableShadow ? styles.disableShadow : undefined}
22+
${styles[size]}`}
23+
disabled={disabled ? "disabled" : ""}
24+
>
25+
{startIcon && (
26+
<span className="material-icons" style={{ verticalAlign: "middle" }}>
27+
{startIcon}
28+
</span>
29+
)}
30+
{/* {variant && <span className={styles["caps"]}> {variant}</span>}
31+
{color && <span className={styles["caps"]}> {color}</span>} */}
32+
<span className={styles["caps"]}> Default </span>
33+
{endIcon && (
34+
<span className="material-icons" style={{ verticalAlign: "middle" }}>
35+
{endIcon}
36+
</span>
37+
)}
38+
</button>
39+
);
40+
};
41+
42+
export default Button;

‎src/components/Button.module.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.button {
2+
padding: 6px 12px;
3+
justify-content: center;
4+
align-items: center;
5+
font-size: 0.9rem;
6+
font-family: "Noto Sans", sans-serif;
7+
border: 1px solid transparent;
8+
background: #e0e0e0;
9+
border-radius: 0.5rem;
10+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
11+
cursor: pointer;
12+
}
13+
.button:hover,
14+
.button:focus,
15+
.button.active {
16+
color: #333;
17+
text-decoration: none;
18+
}
19+
20+
.disableShadow {
21+
box-shadow: none;
22+
}
23+
24+
button:disabled {
25+
cursor: not-allowed;
26+
filter: alpha(opacity=65);
27+
opacity: 0.65;
28+
}
29+
.show-grid small {
30+
min-height: 50px;
31+
display: inline-block;
32+
}
33+
34+
.xs {
35+
padding: 0.25rem 0.5rem;
36+
}
37+
.sm {
38+
padding: 0.375rem 0.75rem;
39+
}
40+
41+
.md {
42+
padding: 0.5rem 1rem;
43+
}
44+
45+
.lg {
46+
padding: 0.6875rem 1.375rem;
47+
}
48+
49+
.default {
50+
background-color: #eee;
51+
color: rgb(95, 92, 92);
52+
border-color: #e0e0e0;
53+
}
54+
55+
.primary {
56+
color: white;
57+
background-color: #2962ff;
58+
border-color: #3d5afe;
59+
}
60+
.primary:hover,
61+
.primary:focus,
62+
.primary.active {
63+
color: #fff;
64+
background-color: #286090;
65+
border-color: #204d74;
66+
}
67+
.warning {
68+
color: #fff;
69+
background-color: #f0ad4e;
70+
border-color: #eea236;
71+
}
72+
.warning:hover,
73+
.warning:focus,
74+
.warning.active {
75+
color: #fff;
76+
background-color: #ec971f;
77+
border-color: #d58512;
78+
}
79+
.danger {
80+
color: white;
81+
background-color: #d32f2f;
82+
border-color: #ec7575;
83+
}
84+
.danger:hover,
85+
.danger:focus,
86+
.danger.active {
87+
color: #fff;
88+
background-color: #c9302c;
89+
border-color: #ac2925;
90+
}
91+
.caps {
92+
text-transform: uppercase;
93+
padding: 2px;
94+
}
95+
.bold {
96+
font-weight: 600;
97+
letter-spacing: 1px;
98+
}
99+
.outline {
100+
background: none !important;
101+
box-shadow: none;
102+
color: #828282;
103+
}
104+
105+
.primary.outline,
106+
.primary.text {
107+
color: #2962ff;
108+
}
109+
110+
.danger.outline,
111+
.danger.text {
112+
color: #d32f2f;
113+
}
114+
115+
.warning.outline,
116+
.warning.text {
117+
color: #f0ad4e;
118+
}
119+
120+
.text {
121+
background: transparent !important;
122+
border: 0px !important;
123+
color: #828282;
124+
box-shadow: none;
125+
}
126+
127+
.raw-code {
128+
display: block;
129+
height: 40px;
130+
}
131+
132+
.materialIcons {
133+
font-size: 14px;
134+
margin: 0 0.5rem;
135+
}

src/Sidebar.js renamed to src/components/Sidebar.js

File renamed without changes.

0 commit comments

Comments
 (0)