fix: resolve empty state image correctly in profile page #4456

jamesgeorge007 · 2024-10-18T06:57:38Z

Description

This PR aims to fix a broken reference to an image as part of the Personal Access Tokens view empty state on the profile page. Follow up of #4304.

Closes HFE-629.

What's changed

colorMode as consumed from the useColorMode() composable is a reactive object, hence, inferring the current Background selection via the value field.

hoppscotch/packages/hoppscotch-common/src/modules/theming.ts

Lines 54 to 60 in 9da5f63

    
           const exposed: HoppColorMode = reactive({ 
        
             preference: currentLocalPreference, 
        
             // Marking as readonly to not allow writes to this ref 
        
             value: selection as Readonly<Ref<Exclude<HoppBgColor, "system">>>, 
        
           }) 
        
           app.provide("colorMode", exposed)

hoppscotch/packages/hoppscotch-common/src/composables/theming.ts

Lines 1 to 4 in 9da5f63

    
           import { inject } from "vue" 
        
           import { HoppColorMode } from "~/modules/theming" 
        
           export const useColorMode = () => inject("colorMode") as HoppColorMode

Preview

Before

After

jamesgeorge007 requested review from AndrewBastin and nivedin October 18, 2024 06:57

nivedin approved these changes Oct 18, 2024

View reviewed changes

jamesgeorge007 changed the base branch from patch to next October 22, 2024 16:29

fix: resolve empty state image correctly in profile page

0fe2370

jamesgeorge007 force-pushed the fix/pat-empty-state-image branch from c4ecfc4 to 0fe2370 Compare October 22, 2024 16:30

jamesgeorge007 merged commit f10fac9 into next Oct 22, 2024
1 check passed

jamesgeorge007 deleted the fix/pat-empty-state-image branch October 22, 2024 16:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: resolve empty state image correctly in profile page #4456

fix: resolve empty state image correctly in profile page #4456

jamesgeorge007 commented Oct 18, 2024 •

edited

Loading

	const exposed: HoppColorMode = reactive({
	preference: currentLocalPreference,
	// Marking as readonly to not allow writes to this ref
	value: selection as Readonly<Ref<Exclude<HoppBgColor, "system">>>,
	})

	app.provide("colorMode", exposed)

	import { inject } from "vue"
	import { HoppColorMode } from "~/modules/theming"

	export const useColorMode = () => inject("colorMode") as HoppColorMode

fix: resolve empty state image correctly in profile page #4456

fix: resolve empty state image correctly in profile page #4456

Conversation

jamesgeorge007 commented Oct 18, 2024 • edited Loading

Description

What's changed

Preview

Before

After

jamesgeorge007 commented Oct 18, 2024 •

edited

Loading