Skip to content

Commit

Permalink
chore: make style sheets consistent (hoppscotch#3074)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liyasthomas
liyasthomas authored May 30, 2023
1 parent 7c7ed68 commit 215df02
Show file tree
Hide file tree
Showing 16 changed files with 618 additions and 95 deletions.
3 changes: 3 additions & 0 deletions packages/hoppscotch-common/assets/scss/themes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,16 +207,19 @@
:root.light {
@include light-theme;
@include light-editor-theme;
color-scheme: light;
}

:root.dark {
@include dark-theme;
@include dark-editor-theme;
color-scheme: dark;
}

:root.black {
@include black-theme;
@include black-editor-theme;
color-scheme: dark;
}

:root[data-accent="blue"] {
Expand Down
16 changes: 14 additions & 2 deletions packages/hoppscotch-common/meta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ export const APP_INFO = {
keywords:
"hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
app: {
background: "#202124",
background: "#181818",
lightThemeColor: "#ffffff",
darkThemeColor: "#181818",
},
social: {
twitter: "@hoppscotch_io",
Expand Down Expand Up @@ -108,7 +110,17 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
// PWA
{
name: "theme-color",
content: APP_INFO.app.background,
content: APP_INFO.app.darkThemeColor,
media: "(prefers-color-scheme: dark)",
},
{
name: "theme-color",
content: APP_INFO.app.lightThemeColor,
media: "(prefers-color-scheme: light)",
},
{
name: "supported-color-schemes",
content: "light dark",
},
{
name: "mask-icon",
Expand Down
Binary file added packages/hoppscotch-common/public/icons/pwa-1024x1024.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-128x128.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-16x16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-192x192.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-256x256.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-32x32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/hoppscotch-common/public/icons/pwa-512x512.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/hoppscotch-selfhost-web/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hoppscotch - Open source API development ecosystem</title>
<title>Hoppscotch • Open source API development ecosystem</title>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand Down
16 changes: 14 additions & 2 deletions packages/hoppscotch-selfhost-web/meta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ export const APP_INFO = {
keywords:
"hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
app: {
background: "#202124",
background: "#181818",
lightThemeColor: "#ffffff",
darkThemeColor: "#181818",
},
social: {
twitter: "@hoppscotch_io",
Expand Down Expand Up @@ -108,7 +110,17 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
// PWA
{
name: "theme-color",
content: APP_INFO.app.background,
content: APP_INFO.app.darkThemeColor,
media: "(prefers-color-scheme: dark)",
},
{
name: "theme-color",
content: APP_INFO.app.lightThemeColor,
media: "(prefers-color-scheme: light)",
},
{
name: "supported-color-schemes",
content: "light dark",
},
{
name: "mask-icon",
Expand Down
46 changes: 40 additions & 6 deletions packages/hoppscotch-selfhost-web/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,20 +150,54 @@ export default defineConfig({
short_name: APP_INFO.name,
description: APP_INFO.shortDescription,
start_url: "/?source=pwa",
id: "/?source=pwa",
protocol_handlers: [
{
protocol: "web+hoppscotch",
url: "/%s",
},
{
protocol: "web+hopp",
url: "/%s",
},
],
background_color: APP_INFO.app.background,
theme_color: APP_INFO.app.background,
icons: [
{
src: "/icon.png",
src: "/icons/pwa-16x16.png",
sizes: "16x16",
type: "image/png",
},
{
src: "/icons/pwa-32x32.png",
sizes: "32x32",
type: "image/png",
},
{
src: "/icons/pwa-128x128.png",
sizes: "128x128",
type: "image/png",
},
{
src: "/icons/pwa-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/icons/pwa-256x256.png",
sizes: "256x256",
type: "image/png",
},
{
src: "/icons/pwa-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "any maskable",
},
{
src: "/logo.svg",
sizes: "48x48 72x72 96x96 128x128 256x256 512x512",
type: "image/svg+xml",
purpose: "any maskable",
src: "/icons/pwa-1024x1024.png",
sizes: "1024x1024",
type: "image/png",
},
],
},
Expand Down
39 changes: 19 additions & 20 deletions packages/hoppscotch-sh-admin/assets/scss/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ input::placeholder,
textarea::placeholder,
.cm-placeholder {
@apply text-secondary;
@apply opacity-35;
@apply opacity-50;
}

input,
Expand Down Expand Up @@ -323,9 +323,10 @@ pre.ace_editor {
@apply after:justify-center;
@apply after:pointer-events-none;
@apply after:font-icon;
@apply after:text-secondaryLight;
@apply after:text-current;
@apply after:right-3;
@apply after:content-["\e313"];
@apply after:text-lg;
}

.info-response {
Expand Down Expand Up @@ -416,56 +417,54 @@ pre.ace_editor {

.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply before:absolute;
@apply before:inset-0;
@apply before:bg-accentLight;
@apply before:opacity-0;
@apply before:z-20;
@apply before:transition;
@apply before:content-DEFAULT;
@apply after:absolute;
@apply after:inset-0;
@apply after:z-20;
@apply after:transition;
@apply after:flex;
@apply after:items-center;
@apply after:justify-center;
@apply after:text-dividerDark;
@apply after:font-icon;
@apply hover:before:opacity-100;
@apply hover:after:text-accentDark;
}

.no-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
}

.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
@apply w-0;
@apply before:-left-0.5;
@apply before:-right-0.5;
@apply before:h-full;
@apply after:content-["\e5d4"];
@apply bg-divider;
}

.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
@apply h-0;
@apply before:-top-0.5;
@apply before:-bottom-0.5;
@apply before:w-full;
@apply after:content-["\e5d3"];
@apply bg-divider;
}

.no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5;
@apply w-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}

.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5;
@apply h-0;
@apply pointer-events-none;
@apply bg-dividerLight;
}

.splitpanes--horizontal .splitpanes__pane {
@apply transition-none;
}

.splitpanes--vertical .splitpanes__pane {
@apply transition-none;
}

.cm-focused {
Expand Down
Loading

0 comments on commit 215df02

Please sign in to comment.