btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: remove of light mode from admin dashboard + added README, .env.example (#33)

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-03-13 18:57:29 +05:30
committed by GitHub
parent 65719b560b
commit 753db25e4c
17 changed files with 157 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-sh-admin/src/components/app/Header.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="flex items-center justify-between border-b border-gray-400 dark:border-gray-600 px-6 py-4 bg-neutral-50 dark:bg-neutral-900 shadow-lg"
class="flex items-center justify-between border-b border-gray-600 px-6 py-4 bg-neutral-900 shadow-lg"
>
<div class="flex items-center">
<button
@@ -64,7 +64,7 @@
>
<div
v-show="dropdownOpen"
class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
>
<HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
<HoppSmartItem

2
packages/hoppscotch-sh-admin/src/components/app/Modal.vue
View File

@@ -2,7 +2,7 @@
<div>
<button
@click="open = true"
class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Invite User
</button>

4
packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
View File

@@ -20,7 +20,7 @@
<span
v-if="isExpanded"
class="mx-2 text-xl font-semibold text-gray-600 dark:text-gray-200"
class="mx-2 text-xl font-semibold text-gray-200"
>Hoppscotch</span
>
</router-link>
@@ -104,6 +104,6 @@ const inactiveClass =
@apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
@apply transition duration-300;
@apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600;
@apply flex overflow-y-auto bg-neutral-900 border-r border-gray-600;
}
</style>

4
packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="flex justify-between">
<h3
class="mt-10 text-2xl justify-start font-medium text-zinc-800 dark:text-gray-200"
>
<h3 class="mt-10 text-2xl justify-start font-medium text-gray-200">
Members
</h3>
<div class="mt-8 ml-2">

108
packages/hoppscotch-sh-admin/src/components/users/Details.vue
View File

@@ -1,108 +0,0 @@
<template>
<div>
<div>
<div class="px-6 rounded-md">
<div class="grid gap-6 mt-4">
<div v-if="user.photoURL" class="h-10">
<img :src="user?.photoURL" alt="" />
</div>
<div>
<label class="text-gray-800 dark:text-gray-200" for="username"
>UID</label
>
<div
v-if="user.uid"
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.uid }}
</div>
</div>
<div v-if="user.displayName">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Name</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.displayName }}
</div>
</div>
<div v-if="user.email">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Email</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.email }}
</div>
</div>
<div v-if="user.createdOn">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Created On</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ getCreatedDateAndTime(user?.createdOn) }}
</div>
</div>
</div>
<div class="flex justify-center sm:justify-start mt-8">
<button
class="mr-3 px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Go Back
</button>
<button
@click="deleteUser"
class="px-4 py-2 text-gray-200 bg-red-800 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-800"
>
Delete User
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue';
import { format } from 'date-fns';
import { useQuery } from '@urql/vue';
import { UserInfoDocument } from '../../helpers/backend/graphql';
import { routeLocationKey, useRoute } from 'vue-router';
const route = useRoute();
const { fetching, error, data } = useQuery({ query: UserInfoDocument });
// Get Proper Date Formats
const getCreatedDateAndTime = (date: string) =>
format(new Date(date), 'd-MM-yyyy hh:mm a');
const props = defineProps({
user: {
type: Object,
required: true,
},
});
onMounted(() => {
console.log('mounted');
console.log(props.user.uid);
});
const deleteUser = () => {
console.log('delete user');
};
</script>
<style>
.modal {
transition: opacity 0.25s ease;
}
</style>