Skip to content

Commit

Permalink
Merge pull request #96 from swoocn/dark-mode-redux
Browse files Browse the repository at this point in the history 
Self approved.
  • Loading branch information
@swoocn
swoocn authored Mar 14, 2024
2 parents f2d3ced + 848176e commit 9525d06
Show file tree
Hide file tree
Showing 8 changed files with 42 additions and 23 deletions.
22 changes: 11 additions & 11 deletions frontend/src/app/business/business-settings/business-menu/business-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
</div>
</section>

<div class="container mx-auto px-4">
<div class="grid grid-cols-2 sm:grid-cols-2 gap-2" #itemsDisplayArea></div>
</div>

<section class="menu-setting__floating-button-section" #addItemButtonSection>
<button
class="menu-setting__floating-button hidden"
Expand All @@ -50,13 +54,9 @@
<i class="fa-solid fa-circle-plus"></i>
</button>
</section>

<div class="container mx-auto px-4">
<div class="grid grid-cols-2 sm:grid-cols-2 gap-2" #itemsDisplayArea></div>
</div>
</main>

<!-- add product to shop model starts here -->
<!-- add product to shop modal starts here -->
<div
class="modal"
#addItemModal
Expand All @@ -82,13 +82,13 @@ <h2 class="modal__title">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_
<input
type="text"
id="item-name"
class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-blue-500"
class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-green-500"
formControlName="itemName" />
</div>

<!-- product images -->
<div class="flex flex-col gap-1 w-full mb-3">
<label for="item-name" class="modal__label text-gray-700 font-bold"
<label for="item-name" class="modal__label font-bold"
>{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRODUCT_IMAGES' | translate }}</label
>
<input
Expand Down Expand Up @@ -129,12 +129,12 @@ <h2 class="modal__title">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_
<!-- product price -->

<div class="flex flex-col gap-1 mb-3 w-full">
<label for="item-price" class="text-gray-700 font-bold">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRICE' | translate }}</label>
<label for="item-price" class="font-bold">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.PRICE' | translate }}</label>
<div class="relative">
<input
type="text"
id="item-price"
class="border border-gray-300 w-full rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
class="border border-gray-300 w-full rounded-md px-3 py-2 focus:outline-none focus:border-green-500"
formControlName="itemPrice" />
<span
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
Expand All @@ -157,7 +157,7 @@ <h2 class="modal__title">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_
<input
type="text"
id="prep-time"
class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-blue-500"
class="appearance-none border border-gray-300 rounded-md py-2 px-4 leading-tight focus:outline-none focus:border-green-500"
formControlName="prepTime" />
</div>

Expand All @@ -168,7 +168,7 @@ <h2 class="modal__title">{{ 'BUSINESS.CONFIGURATION.ADD_PRODUCT_MENU.LABELS.ADD_
>
<textarea
id="description"
class="border border-gray-300 rounded-md w-full px-3 py-2 focus:outline-none focus:border-blue-500 resize-none"
class="border border-gray-300 rounded-md w-full px-3 py-2 focus:outline-none focus:border-green-500 resize-none"
maxlength="50"
rows="4"
formControlName="description"></textarea>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/shop/order-menu/order-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
</section>

<div class="bg-yellow-400 my-3 rounded-md">
<p class="text-center py-1.5 font-bold">{{ 'SHOPPING.ORDER_SCREEN.HIGHLIGHT_MESSAGE' | translate }}</p>
<p class="text-center py-1.5 font-bold text-black">{{ 'SHOPPING.ORDER_SCREEN.HIGHLIGHT_MESSAGE' | translate }}</p>
</div>

<!-- Section for menu products and images-->
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/shop/order-menu/order-menu.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}

body {
font-family: 'Inter', sans-serif;
//font-family: 'Inter', sans-serif;
background-color: #f2f5f7;
}

Expand Down
6 changes: 5 additions & 1 deletion frontend/src/app/shop/order-menu/order-menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ export class OrderMenuComponent implements OnInit {
alt: 'Close-up of a coffee cup on a table',
},
{
url: '../../../assets/images/shopping/mock/coffee-shop-image_2.jpg',
url: '../../../assets/images/shopping/mock/coffee-shop-image_3.jpg',
alt: 'External view of coffee shop',
},
{
url: '../../../assets/images/shopping/mock/coffee-1.jpg',
alt: 'Close-up of a coffee cup on a table',
},
];
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/assets/styles/business/business-menu/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
top: 1.5rem;
font-family: var(--font-family-main);
font-weight: lighter;
font-size: 1.0rem;
}

.menu-settings__section {
Expand All @@ -23,9 +24,11 @@
}

.menu-setting__floating-button-section {
position: fixed;
position: relative;
bottom: 100px;
right: 15px;
padding-top: 100px;
left: 50%;
// right: 15px;
}

.menu-setting__floating-button {
Expand Down
10 changes: 6 additions & 4 deletions frontend/src/assets/styles/business/business-menu/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
top: 23%;
left: 50%;
transform: translate(-50%, -15%);
font-size: 1.0rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -38,8 +39,9 @@

.modal__title {
font-family: var(--font-family-main);
font-size: 0.8rem;
margin: 10px 0;
//font-size: 0.8rem;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}

Expand All @@ -48,7 +50,7 @@
justify-content: center;
text-align: start;
margin-bottom: 0.3rem;
font-size: 0.7rem;
// font-size: 0.7rem;
}

.modal__input {
Expand Down Expand Up @@ -141,7 +143,7 @@
display: block;
justify-content: start;
margin-bottom: 0.3rem;
font-size: 0.7rem;
// font-size: 0.7rem;
}

.modal__textarea {
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/assets/styles/shop/order-menu/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
.order-menu__type,
.order-menu__location {
display: flex;
align-items: center;
// align-items: center;
column-gap: 10px;
}

Expand All @@ -47,8 +47,8 @@

.order-menu__business-image {
margin: 0 auto;
width: 74px;
height: 94px;
width: 105px;
height: 125px;
border-radius: 10px;
margin-top: 1rem;
object-fit: cover;
Expand All @@ -72,6 +72,7 @@
flex: 1;
padding: 0.2rem 1rem;
font-size: 0.7rem;
color: #000;
border: none;
outline: none;
cursor: pointer;
Expand Down
9 changes: 9 additions & 0 deletions frontend/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ body {
background-attachment: fixed;
}

/* TODO; Refactor and attempt to use Angular Material consistently */
@include mat.all-component-themes($app-light-theme);
// dark mode toggle
.dark-mode {
Expand All @@ -39,5 +40,13 @@ body {
.business-registration__select {
background-color: #666060;
}
div[class^="inner-wrapper"] {
color: #ffffff;
background-color: #7e7777;
}
div[class^="modal"] {
color: #ffffff;
background-color: #7e7777;
}

}

0 comments on commit 9525d06

Please sign in to comment.