Skip to content

Commit

Permalink
Replace primary to primary-500
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinutv
vinutv committed May 15, 2019
1 parent 8f618de commit 7c6ab32
Show file tree
Hide file tree
Showing 9 changed files with 19 additions and 18 deletions.
2 changes: 1 addition & 1 deletion app/javascript/layouts/courses/components/Layouts__CoursesShow.re
View file
Expand Up @@ -43,7 +43,7 @@ let make = (~courses, ~currentCourse, _children) => {
)
|> List.map(course =>
<a
className="no-underline block px-4 py-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary hover:bg-grey-200 whitespace-no-wrap"
className="no-underline block px-4 py-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary-500 hover:bg-grey-200 whitespace-no-wrap"
key={course |> Course.id |> string_of_int}
href={course |> Course.path}>
{course |> Course.name |> str}
Expand Down
6 changes: 3 additions & 3 deletions app/javascript/layouts/tailwind.css
View file
Expand Up @@ -28,19 +28,19 @@ body {
/* Button Styles */

.btn-default {
@apply bg-grey-200 text-grey-dark;
@apply bg-gray-200 text-gray-600;
}

.btn-default:hover {
@apply bg-primary-100 text-primary-400;
}

.btn-default:focus {
@apply bg-primary-100 text-primary;
@apply bg-primary-100 text-primary-500;
}

.btn-primary {
@apply bg-primary text-white shadow;
@apply bg-primary-500 text-white shadow;
}

.btn-primary:hover {
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/schools/components/SchoolCustomize.re
View file
Expand Up @@ -144,7 +144,7 @@ let footerLogo = (schoolName, logoOnDarkBg) =>
let editIcon = (additionalClasses, clickHandler, title) =>
<div
className={
"cursor-pointer bg-primary-100 border border-primary-400 text-primary hover:bg-primary-200er:border-primary hover:text-primary-dark p-2 rounded flex items-center "
"cursor-pointer bg-primary-100 border border-primary-400 text-primary-500 hover:bg-primary-200 hover:border-primary-500 hover:text-primary-dark p-2 rounded flex items-center "
++ additionalClasses
}
title
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/schools/components/SchoolCustomize__ImagesEditor.re
View file
Expand Up @@ -312,7 +312,7 @@ let make = (~customizations, ~updateImagesCB, ~authenticityToken, _children) =>
type_="submit"
key="sc-images-editor__update-button"
disabled={updateButtonDisabled(state)}
className="btn btn-primary btn-large mt-6">
className="btn btn-primary-500 btn-large mt-6">
{updateButtonText(state.updating) |> str}
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/schools/components/SchoolCustomize__LinksEditor.re
View file
Expand Up @@ -143,7 +143,7 @@ let kindClasses = selected => {
classes
++ (
selected ?
" nav-tab-item--selected text-primary bg-white hover:bg-white hover:text-primary" :
" nav-tab-item--selected text-primary-500 bg-white hover:bg-white hover:text-primary-500" :
" text-grey-dark"
);
};
Expand Down
12 changes: 6 additions & 6 deletions app/javascript/schools/shared/shared.css
View file
Expand Up @@ -47,7 +47,7 @@ button:disabled, .disabled {
}

.toggle-input:checked+.toggle-label span {
@apply bg-primary;
@apply bg-primary-500;
transform: translateX(20px);
transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
Expand Down Expand Up @@ -96,7 +96,7 @@ button:disabled, .disabled {

.checkbox-label span:first-child:before {
content: "";
@apply bg-primary w-full h-full block opacity-100 rounded-full;
@apply bg-primary-500 w-full h-full block opacity-100 rounded-full;
transform: scale(0);
}

Expand All @@ -105,11 +105,11 @@ button:disabled, .disabled {
}

.checkbox-label:hover span:first-child {
@apply bg-primary-100 border-primary;
@apply bg-primary-100 border-primary-500;
}

.checkbox-input:checked+.checkbox-label span:first-child {
@apply bg-primary border-primary;
@apply bg-primary-500 border-primary-500;
animation: wave 0.4s ease;
}

Expand Down Expand Up @@ -281,7 +281,7 @@ button:disabled, .disabled {
}

.global-sidebar__primary-nav-link--active {
@apply .bg-grey-200 .text-primary;
@apply .bg-gray-200 .text-primary-500;
box-shadow: inset 4px 0 0 0 theme('colors.yellow');
background-image: linear-gradient(to right, theme('colors.white'), theme('colors.grey-200'));
}
Expand Down Expand Up @@ -311,7 +311,7 @@ button:disabled, .disabled {
}

.global-sidebar__primary-nav-link--active:hover {
@apply .bg-grey-200 .text-primary;
@apply .bg-gray-200 .text-primary-500;
}

.blanket {
Expand Down
8 changes: 4 additions & 4 deletions app/views/home/styleguide.html.erb
View file
Expand Up @@ -150,18 +150,18 @@
<div class="bg-white border p-6 rounded-lg mt-2">
<div class="flex h-48">
<div class="dropdown inline-block relative">
<button class="dropdown__btn appearance-none flex bg-grey-200 hover:bg-primary-100 hover:text-primary items-center relative justify-between focus:outline-none font-semibold text-sm relative px-3 py-2 rounded w-full">
<button class="dropdown__btn appearance-none flex bg-grey-200 hover:bg-primary-100 hover:text-primary-500 items-center relative justify-between focus:outline-none font-semibold text-sm relative px-3 py-2 rounded w-full">
<span>Courses</span>
<i class="far fa-chevron-down text-xs ml-3 font-semibold"></i>
</button>
<ul class="dropdown__list list-reset bg-white shadow-lg rounded mt-1 border absolute overflow-hidden min-w-full w-auto z-50">
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary hover:bg-grey-200 whitespace-no-wrap">
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary-500 hover:bg-grey-200 whitespace-no-wrap">
Dropdown list text
</li>
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary hover:bg-grey-200 whitespace-no-wrap">
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary-500 hover:bg-grey-200 whitespace-no-wrap">
Dropdown list text long
</li>
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary hover:bg-grey-200 whitespace-no-wrap">
<li class="no-underline cursor-pointer block p-3 text-xs font-semibold text-grey-darkest border-b border-grey-200 bg-white hover:text-primary-500 hover:bg-grey-200 whitespace-no-wrap">
Dropdown list text looooong
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Expand Up @@ -2,7 +2,7 @@ module.exports = {
plugins: [
require("postcss-import"),
require("postcss-flexbugs-fixes"),
require("tailwindcss")("./tailwind.config.js"),
require("tailwindcss"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009"
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Expand Up @@ -3,6 +3,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
colors: {
...defaultTheme.colors,
primary: {
100: '#F0EAFB',
200: '#D3BFF3',
Expand Down

0 comments on commit 7c6ab32

Please sign in to comment.