Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button Color Match Figma #1411

Merged
merged 7 commits into from
Jul 11, 2022
Merged

Button Color Match Figma #1411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dd8ea7c
button color changes
20Isabel Jun 24, 2022
da6b069
updated save button hover
20Isabel Jun 28, 2022
26d2476
Finish Data Edit Buttons
20Isabel Jul 5, 2022
7bbc447
Last of Button Corrections
20Isabel Jul 6, 2022
a8078f7
Upped next version
20Isabel Jul 6, 2022
6e4acd0
Merge branch 'master' into 753_button_color
20Isabel Jul 7, 2022
b97c1e9
Fixed test
20Isabel Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions apps/andi/assets/css/access-groups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,8 @@
.btn--manage-datasets-search {
min-width: 100px;
height: 2.3rem;
background-color: #27cb00;
margin: 20px 0px;
padding: 0 50px;

&:hover {
background-color: #2de000;
}
}

.btn--manage-users-search {
Expand Down
138 changes: 114 additions & 24 deletions apps/andi/assets/css/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,27 @@ body {
font-size: 1.5rem;
min-width: 10rem;
border: 2px solid black;
background-color: white;
color: black;

&:hover {
background-color: lighten(#6C787F1A, 10%);
}

&:active {
background-color: lighten(#6C787F33, 20%);
}

}

.btn--cancel {
color: black;
background-color: white;
border: 1px solid black;
border: 0px;

&:hover {
color: white;
background-color: black;
color: black;
background-color: rgba(#6C787F, 10%);
}
}

Expand All @@ -89,7 +100,10 @@ body {
color: white;
background-color: $color-text-link;
border: 2px solid $color-text-link;

&:hover {
background-color: #1279D8;
border: 2px solid #1279D8;
}
&:disabled {
background-color: #7f7676;
border: 2px solid #7f7676;
Expand All @@ -103,12 +117,11 @@ body {
background-color: white;
border: 2px solid $color-text-link;
margin-right: 1rem;
}
:hover {
background: rgba($color-text-link, 10%);
border: 2px solid $color-text-link;
}

.btn--submit {
@extend .btn--save;
background-color: $color-text-link;
color: white;
}

.btn--submit {
Expand Down Expand Up @@ -184,26 +197,13 @@ body {
margin-right: 1rem;
}

.btn--save:hover {
background: $color-text-link;
color: white;
border: 2px solid $color-text-link;
}
.btn--submit:hover {
background: white;
color: $color-text-link;
border: 2px solid $color-text-link;
}
.btn--next:hover {
background: white;
color: $color-text-link;
border: 2px solid $color-text-link;
}
.btn--publish:hover {
background: white;
color: $color-text-link;
border: 2px solid $color-text-link;
}



.label {
color: #7f7676;
Expand Down Expand Up @@ -344,6 +344,96 @@ body {
}
}

//////// New Isabel Styles
$primary-blue: #1170C8;
.btn--primary {
color: white;
background-color: $primary-blue;
border: none;
&:active {
background-color: #0F64B3;
}
&:hover {
background-color: #1279D8;
border: none;
}
&:disabled {
background-color: #AAD3F8;
border: none;
cursor: default;
}
}

.btn--primary-outline {
background-color: white;
color: $primary-blue;
border: 1px solid $primary-blue;

&:active {
background-color: rgba($primary-blue, 20%);
//will the boader stay the same
}
&:hover {
background-color:rgba($primary-blue, 10%);
border: 1px solid $primary-blue;
}
&:disabled {
background-color: rgba($primary-blue, 50%);
border: 1px solid $primary-blue;
cursor: default;
}
}

.btn--secondary{
//not seeing colors
background-color: white;
color: black;
border: 0px;
&:active {
background-color: rgba(#6C787F, 20%);
//will the boader stay the same
}
&:hover {
color: black;
background-color: rgba(#6C787F, 10%);
}
&:disabled {
background-color: rgba(#6C787F, 50%);
cursor: default;
}
}

.btn--danger {
background-color: white;
color: #DF1618;
border: 1px solid #DF1618;
.material-icons {
color:#DF1618;
}
&:active {
.material-icons {
color: white;
}
background-color: #B21212;
//will the boader stay the same
}
&:hover {
.material-icons {
color: white;
}
color: white;
background-color:#CD1517;
}
&:disabled {
.material-icons {
color: white;
}
background-color: #FC7071;
cursor: default;
}
}


@import "./datasets.scss";
@import "./access-groups.scss";
@import "./edit.scss";
Expand Down
9 changes: 0 additions & 9 deletions apps/andi/assets/css/edit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,20 +271,11 @@ $component-header-height: 7.5rem;


#delete-dataset-button {
background-color: white;
color: black;
border: 1px solid black;

.delete-icon {
height: 1.5rem;
width: 1.5rem;
vertical-align: sub;
}

&:hover {
background-color: $color-error;
color: white;
border: 1px solid $color-error;
}
}

Expand Down
8 changes: 0 additions & 8 deletions apps/andi/assets/css/ingestions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,7 @@
.btn--select-dataset-search {
min-width: 100px;
height: 2.3rem;
background-color: white;
border: 1px solid #27cb00;
color: #27cb00;
padding: 0 50px;

&:hover {
background-color: #2de000;
color: white;
}
}

.ingestions-view {
Expand Down
5 changes: 5 additions & 0 deletions apps/andi/assets/css/organizations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
padding-bottom: 1rem;
}

.btn--add-organization {
min-width: 100px;
height: 2.3rem;
}

.organizations-line {
margin-bottom: 1.5rem;
}
Expand Down
11 changes: 0 additions & 11 deletions apps/andi/assets/css/user.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,6 @@
width: 100%;
}

.btn--add-organization {
min-width: 100px;
border-radius: 5px;
height: 2.3rem;
background-color: #27cb00;

&:hover {
background-color: #2de000;
}
}

.btn--remove-organization {
padding: 0.3rem 1.2rem;
display: inline-block;
Expand Down
4 changes: 2 additions & 2 deletions apps/andi/assets/css/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ $color-background: #f6f9ff;
$color-content-background: white;

$color-text-primary: black;
$color-text-link: #26adeb;
$color-text-link: #1170C8;

$color-table-header: #cec9c9;
$color-table-stripe: #f6f6f6;

$color-success: green;
$color-error: red;
$color-error: #CD1517;

$table-border: 1px solid #d7d9db;
$table-padding: 0.5em 1.5em;
Expand Down
2 changes: 1 addition & 1 deletion apps/andi/lib/andi_web/live/access_group_live_view.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ defmodule AndiWeb.AccessGroupLiveView do
<div class="access-groups-index">
<div class="access-groups-index__header">
<h1 class="access-groups-index__title">Access Groups</h1>
<button type="button" class="btn btn--add-access-group btn--action" phx-click="add-access-group">ADD ACCESS GROUP</button>
<button type="button" class="btn btn--add-access-group btn--primary" phx-click="add-access-group">+ Add Access Group</button>
</div>
<p>Access Groups determine who is allowed to see datasets. If a dataset is restricted to one or more Access Groups, only the users in
those groups may view the dataset.</p>
Expand Down
14 changes: 7 additions & 7 deletions apps/andi/lib/andi_web/live/access_group_live_view/edit_access_group_live_view.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ defmodule AndiWeb.AccessGroupLiveView.EditAccessGroupLiveView do
<%= live_component(@socket, AndiWeb.AccessGroupLiveView.DatasetTable, selected_datasets: @selected_datasets) %>

<div>
<button class="btn btn--manage-datasets-search" phx-click="manage-datasets" type="button">Manage Datasets</button>
<button class="btn btn--primary-outline btn--manage-datasets-search" phx-click="manage-datasets" type="button">Manage Datasets</button>
</div>

<%= live_component(@socket, AndiWeb.AccessGroupLiveView.UserTable, selected_users: @selected_users) %>

<div>
<button class="btn btn--manage-users-search" phx-click="manage-users" type="button">Manage Users</button>
<button class="btn btn--primary-outline btn--manage-users-search" phx-click="manage-users" type="button">Manage Users</button>
</div>
</form>

Expand All @@ -52,15 +52,15 @@ defmodule AndiWeb.AccessGroupLiveView.EditAccessGroupLiveView do

<div class="edit-page__btn-group" id="access-groups-edit-button-group">
<div class="btn-group__standard">
<button type="button" class="btn btn--large cancel-edit" phx-click="cancel-edit">Cancel</button>
<button type="submit" id="save-button" name="save-button" phx-click="access-group-form_save" class="btn btn--action btn--large save-edit">Save</button>
<button type="button" class="btn btn--secondary btn--large cancel-edit" phx-click="cancel-edit">Cancel</button>
<button type="submit" id="save-button" name="save-button" phx-click="access-group-form_save" class="btn btn--primary btn--large save-edit">Save</button>
</div>

<hr>

<button id="access-group-delete-button" class="btn btn--delete" phx-click="prompt-access-group-delete" type="button">
<span class="delete-icon material-icons">delete_outline</span>
DELETE
<button id="access-group-delete-button" class="btn btn--danger btn--delete" phx-click="prompt-access-group-delete" type="button">
<span class="delete-icon material-icons">delete</span>
Delete
</button>
</div>

Expand Down
2 changes: 1 addition & 1 deletion apps/andi/lib/andi_web/live/access_group_live_view/manage_datasets_modal.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ defmodule AndiWeb.AccessGroupLiveView.ManageDatasetsModal do
<hr class="search-modal-divider">

<div class="btn-group__standard">
<button id="save-dataset-search-button" name="save-dataset-search-button" class="btn btn--large btn--action save-search" type="button" phx-click="save-dataset-search">Save</button>
<button id="save-dataset-search-button" name="save-dataset-search-button" class="btn btn--large btn--primary-outline save-search" type="button" phx-click="save-dataset-search">Save</button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/andi/lib/andi_web/live/dataset_live_view.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ defmodule AndiWeb.DatasetLiveView do
<div class="datasets-index">
<div class="datasets-index__header">
<h1 class="datasets-index__title"><%= title_text(@is_curator) %></h1>
<button type="button" class="btn btn--add-dataset btn--action" phx-click="add-dataset"><%= action_text(@is_curator) %></button>
<button type="button" class="btn--primary" phx-click="add-dataset"><%= action_text(@is_curator) %></button>
</div>
<hr class="datasets-line">

Expand Down
16 changes: 8 additions & 8 deletions apps/andi/lib/andi_web/live/edit_live_view.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ defmodule AndiWeb.EditLiveView do

<div class="edit-page__btn-group">
<div class="btn-group__standard">
<button type="button" class="btn btn--large btn--cancel" phx-click="cancel-edit">Cancel</button>
<button type="button" class="btn btn--secondary btn--large btn--cancel" phx-click="cancel-edit">Cancel</button>
<%= render_publish_button(@submission_status) %>
<button id="save-button" name="save-button" class="btn btn--save btn--large" type="button" phx-click="save">Save Draft</button>
</div>
Expand Down Expand Up @@ -351,15 +351,15 @@ defmodule AndiWeb.EditLiveView do

defp render_publish_button(_) do
~E"""
<button id="publish-button" name="publish-button" class="btn btn--publish btn--action btn--large" type="button" phx-click="publish">Publish</button>
<button id="publish-button" name="publish-button" class="btn--primary btn--large btn--publish" type="button" phx-click="publish">Publish</button>
"""
end

defp render_review_buttons(:submitted) do
~E"""
<button id="delete-dataset-button" name="delete-dataset-button" class="btn btn--review btn--delete" phx-click="dataset-delete" type="button">
<span class="delete-icon material-icons">delete_outline</span>
DELETE
<button id="delete-dataset-button" name="delete-dataset-button" class="btn btn--review btn--danger btn--delete" phx-click="dataset-delete" type="button">
<span class="delete-icon material-icons">delete</span>
Delete
</button>
<button id="reject-button" name="reject-button" class="btn btn--review" type="button" phx-click="reject-dataset">
<span class="reject-icon material-icons">clear</span>
Expand All @@ -374,9 +374,9 @@ defmodule AndiWeb.EditLiveView do

defp render_review_buttons(_) do
~E"""
<button id="delete-dataset-button" name="delete-dataset-button" class="btn btn--review btn--delete" phx-click="dataset-delete" type="button">
<span class="delete-icon material-icons">delete_outline</span>
DELETE
<button id="delete-dataset-button" name="delete-dataset-button" class="btn btn--review btn--danger btn--delete" phx-click="dataset-delete" type="button">
<span class="delete-icon material-icons">delete</span>
Delete
</button>
"""
end
Expand Down
4 changes: 2 additions & 2 deletions apps/andi/lib/andi_web/live/edit_live_view/data_dictionary_form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,8 @@ defmodule AndiWeb.EditLiveView.DataDictionaryForm do
</div>

<div class="edit-button-group form-grid">
<a href="#metadata-form" id="back-button" class="btn btn--back btn--large" phx-click="toggle-component-visibility" phx-value-component-expand="metadata_form">Back</a>
<a href="#extract-step-form" id="next-button" class="btn btn--next btn--large btn--action" phx-click="toggle-component-visibility" phx-value-component-expand="extract_step_form">Next</a>
<a href="#metadata-form" id="back-button" class="btn btn--secondary btn--back btn--large" phx-click="toggle-component-visibility" phx-value-component-expand="metadata_form">Back</a>
<a href="#extract-step-form" id="next-button" class="btn btn--primary-outline btn--next btn--large btn--action" phx-click="toggle-component-visibility" phx-value-component-expand="extract_step_form">Next</a>
</div>
</div>
</form>
Expand Down
Loading