Made changes to CSS and merged together.

This commit is contained in:
2025-12-19 16:30:34 -05:00
parent 7717c70dd9
commit 8c656ca6d5
4 changed files with 14 additions and 14 deletions

View File

@@ -42,7 +42,7 @@
--delete-btn-hover-bg: #ffeaea; --delete-btn-hover-bg: #ffeaea;
--delete-btn-hover-shadow: #ef444422; --delete-btn-hover-shadow: #ef444422;
--checkbox-accent: #667eea; --checkbox-accent: #667eea;
--list-loading-color: #888; --list-loading-color: #c0c0c0;
--modal-bg: #fff; --modal-bg: #fff;
--modal-text: #222; --modal-text: #222;

View File

@@ -74,7 +74,7 @@ function handleItemClick(item: PendingReward) {
<div class="centered-list-container"> <div class="centered-list-container">
<div v-if="loading" class="loading">Loading notifications...</div> <div v-if="loading" class="loading">Loading notifications...</div>
<div v-else-if="error" class="error">{{ error }}</div> <div v-else-if="error" class="error">{{ error }}</div>
<div v-else-if="notifications.length === 0" class="empty">No Notifications</div> <div v-else-if="notifications.length === 0" class="empty">No notifications</div>
<div v-else class="listbox"> <div v-else class="listbox">
<div v-for="(item, idx) in notifications" :key="item.id"> <div v-for="(item, idx) in notifications" :key="item.id">
<div class="list-item notification-centered" @click="handleItemClick(item)"> <div class="list-item notification-centered" @click="handleItemClick(item)">

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="reward-view"> <div class="reward-view">
<div v-if="rewardCountRef == 0" class="no-message"> <div v-if="rewardCountRef == 0" class="no-message">
<div>No Rewards</div> <div>No rewards</div>
<div class="sub-message"> <div class="sub-message">
<button class="create-btn" @click="createReward">Create</button> a reward <button class="create-btn" @click="createReward">Create</button> a reward
</div> </div>
@@ -89,9 +89,9 @@ const createReward = () => {
} }
.create-btn { .create-btn {
background: var(--task-create-btn-bg); background: var(--create-btn-bg);
color: var(--task-create-btn-color); color: var(--create-btn-color);
border: 2px solid var(--task-create-btn-border); border: 2px solid var(--create-btn-border);
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
@@ -103,7 +103,7 @@ const createReward = () => {
color 0.18s; color 0.18s;
} }
.create-btn:hover { .create-btn:hover {
background: var(--task-create-btn-hover-bg); background: var(--create-btn-hover-bg);
color: var(--task-create-btn-hover-color); color: var(--create-btn-hover-color);
} }
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="task-view"> <div class="task-view">
<div v-if="taskCountRef === 0" class="no-message"> <div v-if="taskCountRef === 0" class="no-message">
<div>No Tasks</div> <div>No tasks</div>
<div class="sub-message"> <div class="sub-message">
<button class="create-btn" @click="createTask">Create</button> a task <button class="create-btn" @click="createTask">Create</button> a task
</div> </div>
@@ -91,9 +91,9 @@ const createTask = () => {
} }
.create-btn { .create-btn {
background: var(--task-create-btn-bg); background: var(--create-btn-bg);
color: var(--task-create-btn-color); color: var(--create-btn-color);
border: 2px solid var(--task-create-btn-border); border: 2px solid var(--create-btn-border);
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
@@ -105,7 +105,7 @@ const createTask = () => {
color 0.18s; color 0.18s;
} }
.create-btn:hover { .create-btn:hover {
background: var(--task-create-btn-hover-bg); background: var(--create-btn-hover-bg);
color: var(--task-create-btn-hover-color); color: var(--create-btn-hover-color);
} }
</style> </style>