web style
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import { View } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
||||
import { EMOTION_CONVEY } from "../../data/data";
|
||||
import { View } from "react-native";
|
||||
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
||||
import ListSelection from "../../components/ListSelection/ListSelection";
|
||||
import { EMOTION_CONVEY } from "../../data/data";
|
||||
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
||||
|
||||
const EmotionConvey = ({
|
||||
selected: selectedProp,
|
||||
@@ -29,6 +29,7 @@ const EmotionConvey = ({
|
||||
>
|
||||
<ItemContainer height={containerLayout?.height}>
|
||||
<ListSelection
|
||||
disableHover
|
||||
options={EMOTION_CONVEY}
|
||||
variant="emotion"
|
||||
selected={selected}
|
||||
|
||||
@@ -66,29 +66,31 @@ const CreateLyricsHeader = ({
|
||||
...blurViewStyle,
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{subTitle && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{subTitle}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
<>
|
||||
{title && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{subTitle && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{subTitle}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
</>
|
||||
</View>
|
||||
) : (
|
||||
<BlurView
|
||||
@@ -104,29 +106,31 @@ const CreateLyricsHeader = ({
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
>
|
||||
{title && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{subTitle && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{subTitle}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
<>
|
||||
{title && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{subTitle && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{subTitle}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
</>
|
||||
</BlurView>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { View, Text, TextInput } from "react-native";
|
||||
import React from "react";
|
||||
import { Text, TextInput, View } from "react-native";
|
||||
import { Palette } from "../../../styles";
|
||||
import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
|
||||
@@ -17,44 +17,46 @@ const CustomInput = ({
|
||||
}) => {
|
||||
return (
|
||||
<View style={{ gap: 8 }} onLayout={onLayout}>
|
||||
{label && (
|
||||
<Text
|
||||
<>
|
||||
{label && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
backgroundColor: Palette.white,
|
||||
height,
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: Palette.white,
|
||||
height,
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.grayMid}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
style={{
|
||||
height: "100%",
|
||||
fontSize: 16,
|
||||
color: Palette.black,
|
||||
fontFamily: FONT_FAMILY.InterRegularItalic,
|
||||
}}
|
||||
multiline={multiline}
|
||||
numberOfLines={multiline ? undefined : 1}
|
||||
maxLength={maxLength}
|
||||
textAlignVertical={multiline ? "top" : "center"}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
</View>
|
||||
<TextInput
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.grayMid}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
style={{
|
||||
height: "100%",
|
||||
fontSize: 16,
|
||||
color: Palette.black,
|
||||
fontFamily: FONT_FAMILY.InterRegularItalic,
|
||||
}}
|
||||
multiline={multiline}
|
||||
numberOfLines={multiline ? undefined : 1}
|
||||
maxLength={maxLength}
|
||||
textAlignVertical={multiline ? "top" : "center"}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user