Skip to content

Commit

Permalink
update to Tailwind 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@pasqualevitiello
pasqualevitiello committed May 5, 2021
1 parent 7e1cf00 commit 71d7623
Show file tree
Hide file tree
Showing 10 changed files with 13,639 additions and 8,893 deletions.
2 changes: 1 addition & 1 deletion craco.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss')('./tailwind.config.js'),
require('tailwindcss')('./src/css/tailwind.config.js'),
require('autoprefixer')
],
},
Expand Down
22,373 changes: 13,542 additions & 8,831 deletions package-lock.json
View file

Large diffs are not rendered by default.

25 changes: 13 additions & 12 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^5.7.0",
"@tailwindcss/custom-forms": "^0.2.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@craco/craco": "^6.1.1",
"@tailwindcss/forms": "^0.3.2",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.8",
"aos": "^3.0.0-beta.6",
"autoprefixer": "^9.8.6",
"cruip-js-toolkit": "^1.0.2",
"node-sass": "^4.14.1",
"postcss-cli": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"cruip-js-toolkit": "^1.0.3",
"node-sass": "^5.0.0",
"postcss": "^8.2.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-scripts": "4.0.3",
"react-transition-group": "^4.4.1",
"tailwindcss": "^1.8.10"
"tailwindcss": "^2.1.1",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "craco start",
Expand Down
21 changes: 20 additions & 1 deletion src/css/additional-styles/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,28 @@ html {
:focus,
button:focus,
.btn:focus,
.btn-sm:focus {
.btn-sm:focus,
.form-input:focus,
.form-textarea:focus,
.form-multiselect:focus,
.form-select:focus,
.form-checkbox:focus,
.form-radio:focus {
outline: 2px solid rgba(#0070F4, 0.5);
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {

&:focus {
box-shadow: none !important;
}
}

// Hamburger button
.hamburger {

Expand All @@ -18,6 +36,7 @@ button:focus,
&:nth-child(2),
&:nth-child(3) {
transform-origin: center;
transform: rotate(0deg);
}

&:nth-child(1) {
Expand Down
39 changes: 39 additions & 0 deletions src/css/additional-styles/utility-patterns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,43 @@

.btn-sm {
@apply px-4 py-2 shadow;
}

// Forms
.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
@apply bg-white border border-gray-300 focus:border-gray-500;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox {
@apply rounded;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
@apply py-3 px-4;
}

.form-input,
.form-textarea {
@apply placeholder-gray-500;
}

.form-select {
@apply pr-10;
}

.form-checkbox,
.form-radio {
@apply text-gray-800 rounded-sm;
}
53 changes: 15 additions & 38 deletions tailwind.config.js → src/css/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,17 @@ module.exports = {
800: '#0059C2',
900: '#004391',
},
teal: {
100: '#E6FFFA',
200: '#B2F5EA',
300: '#81E6D9',
400: '#4FD1C5',
500: '#3ABAB4',
600: '#319795',
700: '#2C7A7B',
800: '#285E61',
900: '#234E52',
},
},
boxShadow: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.16)',
Expand Down Expand Up @@ -110,43 +121,9 @@ module.exports = {
'50%': { transform: 'translateY(-5%)', },
},
},
customForms: theme => ({
default: {
'input, textarea, multiselect, select, checkbox, radio': {
backgroundColor: theme('colors.white'),
borderColor: theme('colors.gray.300'),
borderRadius: theme('borderRadius.default'),
'&:focus': {
outline: undefined,
boxShadow: undefined,
borderColor: theme('colors.gray.500'),
},
},
'input, textarea, multiselect, select': {
backgroundColor: theme('colors.white'),
fontSize: undefined,
lineHeight: undefined,
paddingTop: theme('spacing.3'),
paddingRight: theme('spacing.4'),
paddingBottom: theme('spacing.3'),
paddingLeft: theme('spacing.4'),
},
'input, textarea': {
'&::placeholder': {
color: theme('colors.gray.500'),
},
},
select: {
paddingRight: theme('spacing.10'),
iconColor: theme('colors.gray.400'),
},
'checkbox, radio': {
color: theme('colors.gray.800'),
backgroundColor: theme('colors.white'),
borderRadius: theme('borderRadius.sm'),
},
},
}),
zIndex: {
'-1': '-1',
},
},
},
variants: {
Expand All @@ -157,6 +134,6 @@ module.exports = {
opacity: ['responsive', 'hover', 'focus', 'group-hover'],
},
plugins: [
require('@tailwindcss/custom-forms'),
require('@tailwindcss/forms'),
],
};
12 changes: 6 additions & 6 deletions src/partials/Features.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ function Features() {
leaveEnd="opacity-0 -translate-y-16"
>
<div className="relative inline-flex flex-col">
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png')} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png')} width="500" height="44" alt="Element" style={{ top: '30%' }} />
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png').default} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png').default} width="500" height="44" alt="Element" style={{ top: '30%' }} />
</div>
</Transition>
{/* Item 2 */}
Expand All @@ -126,8 +126,8 @@ function Features() {
leaveEnd="opacity-0 -translate-y-16"
>
<div className="relative inline-flex flex-col">
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png')} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png')} width="500" height="44" alt="Element" style={{ top: '30%' }} />
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png').default} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png').default} width="500" height="44" alt="Element" style={{ top: '30%' }} />
</div>
</Transition>
{/* Item 3 */}
Expand All @@ -143,8 +143,8 @@ function Features() {
leaveEnd="opacity-0 -translate-y-16"
>
<div className="relative inline-flex flex-col">
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png')} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png')} width="500" height="44" alt="Element" style={{ top: '30%' }} />
<img className="md:max-w-none mx-auto rounded" src={require('../images/features-bg.png').default} width="500" height="462" alt="Features bg" />
<img className="md:max-w-none absolute w-full left-0 transform animate-float" src={require('../images/features-element.png').default} width="500" height="44" alt="Element" style={{ top: '30%' }} />
</div>
</Transition>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/partials/HeroHome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function HeroHome() {
<div>
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
<div className="flex flex-col justify-center">
<img className="mx-auto" src={require('../images/hero-image.png')} width="768" height="432" alt="Hero" />
<img className="mx-auto" src={require('../images/hero-image.png').default} width="768" height="432" alt="Hero" />
<svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
Expand Down Expand Up @@ -80,7 +80,7 @@ function HeroHome() {
</g>
</svg>
</div>
<button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={(e) => { e.preventDefault(); setVideoModalOpen(true); }} aria-controls="modal">
<button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={(e) => { e.preventDefault(); e.stopPropagation(); setVideoModalOpen(true); }} aria-controls="modal">
<svg className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
<path d="M10 17l6-5-6-5z" />
Expand Down
2 changes: 1 addition & 1 deletion src/partials/Testimonials.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/utils/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ function Dropdown({
<a
className="text-gray-600 hover:text-gray-900 px-3 lg:px-5 py-2 flex items-center transition duration-150 ease-in-out"
href="#0"
aria-haspopup="true"
aria-expanded={dropdownOpen}
onClick={(e) => e.preventDefault()}
>
Expand Down

0 comments on commit 71d7623

Please sign in to comment.