Skip to content

Glimpse gm lock fallback3 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brandonysli wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Glimpse gm lock fallback3 #8

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e84fd7
finished lockfallback component
brandonysli Jun 30, 2024
8beeae6
removed .env from cache
brandonysli Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions components/LockFallback.tsx
View file
Open in desktop
Copy link
Member

@AndrewCheung360 AndrewCheung360 Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think using an svg from the figma might make the code a little more readable and easier to make responsive, but overall the lock fallback component looks great!

Copy link
Collaborator Author

@brandonysli brandonysli Jul 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, could you show me later how to use an svg from figma?

Copy link
Member

@AndrewCheung360 AndrewCheung360 Jul 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
Not sure if this is the best way to do so, but this is what I did for my components.

Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import { Text, View } from "./Themed";

interface LockFallbackProps {}

const LockFallback: React.FC<LockFallbackProps> = () => {
return (
<View className="flex flex-col justify-center items-center gap-4 p-2">
<View className="flex justify-center items-center w-full">
<View className="relative w-32 h-32">
<View className="absolute bottom-0 left-0 w-32 h-20 rounded-3xl border-gray-300 border-[10px]"></View>
<View className="absolute overflow-hidden left-7 w-[72px] h-8">
<View className="absolute bottom--8 w-[72px] h-16 rounded-full border-gray-300 border-[10px]"></View>
</View>
<View className="absolute left-7 top-8 h-6 w-0 border-gray-300 border-[5px]"></View>
<View className="absolute left-[90px] top-8 h-6 w-0 border-gray-300 border-[5px]"></View>
</View>
</View>
<View className="flex justify-center items-center w-3/5">
<Text className="">
Other members' responses will be locked until you answer the
prompt.
</Text>
</View>
</View>
);
};

export default LockFallback;